javascript – jquery ui out：函数不触发

2019年8月6日 124次阅读

在
jquery-ui文档中,它说出：当一个接受的draggable被拖出droppable时触发了函数.但在我的情况下,我希望容器都可以拖动和放置.此外,我希望id为droppable的div也可以排序.现在拖放工作正常但是当我拖出其中一个项目时,out函数没有被触发,所以我该怎么做.

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

最佳答案 看起来你要做的是两个连接的可排序,它已经由可排序的小部件处理.你有几乎相同的事件,drop几乎相当于接收,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/

点赞