JQuery用戶界面拖動和投擲的，但不可排序

Question

我有我的網頁2列出了具有以下情形：

1. 列表A中排序。
2. 列表B是可拖動的並且可以使用列表A放置，但不能在其內部排序。

我已經嘗試過來自JQuery UI的示例，並在SO上查找了一些帖子。似乎無法獲得＃2的工作。

有人有什麼見解？

在此先感謝。

代碼：

$("#listA").droppable({accept: "#listB li"}).sortable({ 
}).disableSelection(); 


$("#listB li").draggable({ 
    appendTo: "body", 
    helper: "clone", 
    connectToSortable: '#listA' 
}).droppable({accept: "#listA"}); 


<ul id="listA"> 
    <li id="ul_item_1">item-1</li> 
    <li id="ul_item_2">item-2</li> 
    <li id="ul_item_3">item-3</li> 
</ul> 
<br> 
<br> 
<ul id="listB"> 
    <li id="ul_item_4">item-4</li> 
    <li id="ul_item_5">item-5</li> 
    <li id="ul_item_6">item-6</li> 
</ul> 

這裏是的jsfiddle鏈接：http://jsfiddle.net/kmenezes/8eCJH/

我有利斯塔按預期（可拖動，可放開和排序）工作。我無法將物品放入ListB中。這就是我需要這個工作。

謝謝！

Answer 1

我很難讓它與您在示例中設置的方式一起工作..我做了幾輪工作，希望對您有所幫助。

例1

• 你可以列出一個清單和B之間移動，但如果你試圖對列表進行排序B，則它得到恢復。

HTML

<ul class="sortable" id="listA"> 
    <li id="ul_item_1">item-1</li> 
    <li id="ul_item_2">item-2</li> 
    <li id="ul_item_3">item-3</li> 
</ul> 
<br> 
<br> 
<ul class="sortable" id="listB"> 
    <li id="ul_item_4">item-4</li> 
    <li id="ul_item_5">item-5</li> 
    <li id="ul_item_6">item-6</li> 
</ul> 

jQuery的

$('#listA, #listB').sortable({ 
    helper: "clone", 
    placeholder: "selected-option", 
    forcePlaceholderSize: true, 
    dropOnEmpty: true, 
    revert: true, 
    connectWith: '.sortable', 
    tolerance: "pointer", 
    cursor: "move", 
    beforeStop: function (event, ui) { 
    if($(ui.helper).parent().attr('id') === 'listB' && $(ui.placeholder).parent().attr('id') === 'listB') 
     return false; 
    } 
}); 

小提琴：http://jsfiddle.net/trevordowdle/PK3LE/

UPDATE

MCCC提供的更新實施例1不引發錯誤。 （見註釋）

小提琴：http://jsfiddle.net/PK3LE/8/

例2

• 除了列表2類似於例1中克隆得到像你在你的例子有..

小提琴：http://jsfiddle.net/trevordowdle/PK3LE/2/