jquery ui out: function not triggering

Question

In jquery-ui documentation it says out: function is triggered when an accepted draggable is dragged out of the droppable. But in my case I want both the container to be draggable and droppable. Also I want the div with id droppable to be sortable as well. For now drag and drop works fine but when I drag out one of the item the out function is not triggered so how can I do that.

html

<div id="droppable" class="draggable droppable sortable">
</div>
<div id="draggable" class="droppable draggable sortable">
    <p id="hello11" class="item">Hello1</p>
    <p id="hello22" class="item">Hello2</p>
    <p id="hello33" class="item">Hello3</p>
    <p id="hello44" class="item">Hello4</p>
    <p id="hello55" class="item">Hello5</p>
</div>
<div id="form-container">
    <form method="post" action="">
        <!-- Do stuff here -->
        <input type="text" id ="hello1" name="xoxo1" value="">
        <input type="text" id ="hello2" name="xoxo2" value="">
        <input type="text" id ="hello3" name="xoxo3" value="">
        <input type="text" id ="hello4" name="xoxo4" value="">
        <input type="text" id ="hello5" name="xoxo5" value="">
    </form>
</div>

script.js

jQuery(document).ready(function($){
    $( ".droppable" ).droppable({
        accept: ".item"
    });
    $( "#droppable" ).droppable({
      accept: ".item",
      drop: function( event, ui ) {
        // Set values
        var myid = ui.draggable.attr("id").toString();
        myid = myid.substring(0, myid.length - 1);
        document.getElementById(myid).value = myid;
      },
      out: function(event,ui){
        // Unset the values
        var myid = ui.draggable.attr("id").toString();
        myid = myid.substring(0, myid.length - 1);
        document.getElementById(myid).value = '';
      }
    });

    $( ".sortable" ).sortable();

    $( ".draggable .item" ).draggable({
      connectToSortable: ".sortable"
    });
});

Here is a fiddle for that

Sorry I don't have this on jsfiddle , I am working on my local machine. @ParagBhayani — Puni, Jul 10 '15 at 12:20
Please update this fiddle so that I can help you out ... https://jsfiddle.net/3eefs2kp/ — Parag Bhayani, Jul 10 '15 at 12:29
I am using jQuery ui . Ok I'll sign up for jsfiddle and let you know — Puni, Jul 10 '15 at 12:35
Here is link to jsfiddle http://jsfiddle.net/Puni/rkx53c2r/ It does not work exactly as in my local computer here in jsfiddle and I've never used it so I don't if you can get it. @ParagBhayani — Puni, Jul 10 '15 at 13:21
One thing I noticed here is you just have one element as droppable, you should put both element as droppable — Parag Bhayani, Jul 10 '15 at 13:50
I've tried by adding the following code but still it does not work $(".droppable").droppable({ accept: ".item" }); — Puni, Jul 10 '15 at 13:59

score 2 · Accepted Answer · answered Jul 10 '15 at 16:43

It looks like what you're trying to do is two connected sortables, which is already handled by sortable widget. You have pretty much the same event, drop is pretty much equivalent to receive, and out works as well.

It's not completely clear what the end result should be, but this should give you some ideas:

    $(".sortable").sortable({
        connectWith: '.sortable',
        receive: function (event, ui) {
            // Set values
            var myid = ui.item.attr("id").toString();
            myid = myid.substring(0, myid.length - 1);
            document.getElementById(myid).value = myid;
        },
        out: function (event, ui) {
            // Unset the values
             console.log('out')
            var myid = ui.item.attr("id").toString();
            myid = myid.substring(0, myid.length - 1);
            document.getElementById(myid).value = myid;
        }
    });

http://jsfiddle.net/Lhn3zo0s/2/

What you did is really great, the drag functionalities become very smooth. Hmm... not exactly as I wanted, but I got the idea of changing my initial approach from your answer. I really really appreciate for your answer. Thank You — Puni, Jul 10 '15 at 17:04

jquery ui out: function not triggering

1 Answers1