如何跟踪jQuery拖放功能

我正在使用jQuery UI的引导程序为我的列表创建拖放功能。如何跟踪jQuery拖放功能

我的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这表明该项目被拖拽和它在哪里现在在列表中（使用元素属性来跟踪）。我怎样才能做到这一点。

感谢

来源

2015-08-22 Alex Zahir

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

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

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

编辑：这里是draggable功能：

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

来源

2015-08-22 17:38:38 Data

感谢指出了这一点。现在有一种方法可以指示哪个项目被拖放，以及它现在在列表中的什么位置。 –

你可以处理UI事件，如上面发布的'.resizable'代码所示，这里有一个可拖动的代码：http://stackoverflow.com/a/25363015/1837472只需使用'function（event）{'，你就可以使用'$（this）'来查看什么触发了拖动。 – Data

好的，谢谢我将在此工作，并回来看看是否可以拿出具体的解决方案的问题 –

如何跟踪jQuery拖放功能

回答

相关问题