如何跟蹤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拖放功能

回答

相關問題