javascript - jquery ui 输出 : function not triggering

Question

在 jquery-ui 文档中它说 out: 当一个接受的 draggable 被拖出 droppable 时触发函数。但就我而言，我希望容器都是可拖放的。我也希望带有 id droppable 的 div 也可以排序。现在拖放工作正常，但是当我拖出其中一个项目时，没有触发输出功能，所以我该怎么做。

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>

脚本.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

看起来您正在尝试做的是两个连接的 sortables，它们已经由 sortable 小部件处理。您有几乎相同的事件，drop 几乎等同于 receive，out 也同样有效。

目前还不完全清楚最终结果应该是什么，但这应该会给您一些想法:

    $(".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/