如何跟踪 jQuery 拖放功能

Question

我正在使用带有 jQ​​uery UI 的引导程序来为我的列表创建拖放功能。

我的 HTML 是：

<ul class="draggablePanelList list-unstyled">
    <li class="panel panel-info">
        <div class="panel-heading">You can drag this panel.</div>
        <div class="panel-body">Content ...</div>
    </li>
    <li class="panel panel-info">
        <div class="panel-heading">You can drag this panel too.</div>
        <div class="panel-body">Content ...</div>
    </li>
</ul>

使拖放功能起作用的我的脚本：

jQuery(function($) {
    var panelList = $('.draggablePanelList');

    panelList.sortable({
        // Only make the .panel-heading child elements support dragging.
        // Omit this to make then entire <li>...</li> draggable.
        update: function() {
            $('.panel', panelList).each(function(index, elem) {
                 var $listItem = $(elem),
                     newIndex = $listItem.index();

                 // Persist the new indices.
            });
        }
    });
});

我想添加 javascript 来指示哪个项目被拖放以及它现在在列表中的位置（使用元素属性进行跟踪）。我该怎么做。

谢谢

Answer 1

UI 中有可拖动和调整大小的功能。完成调整大小后，我使用以下内容处理事件：

.resizable('stop' : function(){ doSomething.call(this); }.bind(this))

您可以在拖放 UI 功能中包含相同的绑定。您可能必须添加一个侦听器才能获取列表项的目标。

编辑：这是draggable 函数：

.draggable({ 'stack'       : '.classContainer', 
             'handle'      : '.classThatHandlesDrag', 
             'containment' : '#divThatLimitsTheDrag' })