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

Answer 1

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/