[英]jQuery UI Sortable and Draggable List Interaction Not Working Quite Right
我在這里有一個供魔獸世界玩家使用的食譜追蹤器工具: http : //www.wowgeeks.com/tracker.php?item=recipes 。 我有三個自定義設計的列表:“有”列表,“需要”列表以及要選擇的原始項目列表。 我將最后一個列表作為可拖動對象,並將其connectToSortable
設置為前兩個列表共享的類。
這三個列表的HTML:
<div class="sub-third">
<h1>My Recipes</h1>
<div class="tracker-list sortable" id="have-list">
</div>
</div>
<div class="sub-third">
<h1 style="color: #f90;">Recipes I Need</h1>
<div class="tracker-list sortable" id="need-list">
</div>
</div>
<div class="sub-third">
<h1 style="color: #eee;">Add Recipes</h1>
<div class="tracker-list" id="add-list">
<div class="tracker-item" id="itemid_123">
<a class="tracker-icon" rel="item=43509"><img class="wow-icon" src="/images/icons/small/inv_scroll_03.jpg" alt="Icon" /></a>
<p>Bad Clams</p>
</div>
<!-- ETC... -->
</div>
</div>
這是可拖動/可排序的JavaScript:
$(function() {
$('#add-list .tracker-item').draggable({
connectToSortable : '.sortable',
helper : 'clone'
});
$('#have-list, #need-list').sortable({
connectWith : '.tracker-list',
cursor : 'move',
revert : true,
placeholder : 'ui-state-highlight',
update : function() {
var order = $(this).sortable('serialize');
order += '&userid=1&itemtype=Recipes&charid=0';
//alert(order);
}
});
$('.tracker-list, .tracker-item').disableSelection(); // So dragging doesn't accidentally select any text
$('#have-list, #need-list').sortable('refresh'); // Refresh the lists
});
由於某種原因,當我將一個項目從第三列表拖到第一列表一兩次后,它突然拒絕合作。 第三列表中的項目突然變得無法拖動。 但是將項目從第三列表拖到第二列表就可以了。 您可以嘗試上面的鏈接,然后自己進行測試。 誰能告訴我可能是什么問題?
$('#add-list .tracker-item').draggable({
connectToSortable : '.target-list',
您僅將第三個列表連接到此處的第二個列表。 如果您將target-list類添加到第一個列表,則可以從第三個列表拖動到第一個列表。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.