JQuery UI可排序：如何讓項目具有可拖拽行爲（例如hoverClass）？

我正在使用JQuery UI的拖放一個Web應用程序。JQuery UI可排序：如何讓項目具有可拖拽行爲（例如hoverClass）？

我有以下HTML結構：

<div id="list"> 
<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
</div>

和Javscript：

$('#list').sortable({containment: 'parent'});

當我拖動，移動和刪除一個項目，所有的項目都很好verticially對齊，這我很喜歡。

現在我希望當我拖動並將一個項目拖放到另一個項目上時，下面的項目可以顯示一些類似於JQuery UI的Droppable中可用的hoverClass的視覺效果。

我該怎麼辦？

感謝和問候！

來源

2013-09-01 curious1

我不認爲那可能的排序。您可以得到的最接近的是佔位符屬性，它指示物品可以丟棄的位置 –

對於hoverClass，您可以使用over和out方法做類似的事情。 start和stop也可以幫助你。

$('.sortable').sortable({ 
    over : function(){ 
     $(this).addClass('valid'); 
    }, 
    out : function(){ 
      $(this).removeClass('valid'); 
    } 
});

來源

2013-10-28 08:56:02 krampstudio

非常感謝您的意見。我嘗試過這個。 $（this）.addClass（'valid'）影響整個排序列表，而不是被丟棄的問題。問候。 – curious1

使用'receive'方法，您可以訪問被丟棄的元素。 – krampstudio

接收事件似乎沒有被調用，當一個對象盤旋並被放在同一個可排序列表中的一個對象上時。 – curious1

如前所述，$(this)指向當前的排序，你徘徊在over類型的事件。實現排序徘徊使用jQuery的最可靠的方法是如下：

$('#some-element').sortable({ 
    start: { 
     ui.item.parent().addClass('sortable-hover'); 
    }, 
    over: { 
     $('.sortable-hover').removeClass('sortable-hover'); 
     $(this).addClass('sortable-hover'); 
    }, 
    stop: { 
     ui.item.parent().removeClass('sortable-hover'); 
    } 
});

您可以根據需要添加更多的邏輯。

希望它能幫助， - 何塞

來源

2015-01-27 12:03:33

我希望這是你在找什麼

$('#list').sortable({ 
    containment: 'parent', 
    start: function() { 
     $(this).addClass('sortable-hover'); 
    }, 
    over: function() { 
     $('#list').removeClass('sortable-hover'); 
     $(this).addClass('sortable-hover'); 
    }, 
    stop: function) { 
     $('#list').removeClass('sortable-hover'); 
    }, 
});

來源

2017-11-27 10:55:38

JQuery UI可排序：如何讓項目具有可拖拽行爲（例如hoverClass）？

回答

相關問題