如何更改jQuery UI排序（连接列表）演示，以便只有一个列表实际可排序？

Question

这里我指的演示：
http://jqueryui.com/sortable/#connect-lists

由于是，这两个列表可排序，你可以从一个列表拖动的元素到另一个。

如何在保留将元素从＃sortable1拖到＃sortable2的能力的情况下，在左侧列表（＃sortable1）而不是可排序（使您不能重新排列元素）？ （＃sortable2必须保持排序）

Answer 1

固定它自己。

HTML：

<ul class="left"> 
    <li class="item">Drag Me</li> 
    <li class="item">Over</li> 
    <li class="item">There --></li> 
</ul> 

<ul class="right"> 
    <li class="built">1</li> 
    <li class="built">2</li> 
    <li class="built">3</li> 
</ul> 

CSS：

ul { 
    width: auto; 
    height: 500px; 
    padding: 0; 
    margin: 0 100px 0 0; 
    list-style-type: none; 
    float: left; 
    background-color: blue; 
} 



.left li { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    border: 1px solid; 
} 

.right li { 
    width: 100px; 
    height: 100px; 
    background-color: yellow; 
    border: 1px solid; 
} 

JAVASCRIPT：

$(function() { 

    $(".item").draggable({ 
     helper: "clone", 
     revert: "invalid", 
     stack: ".item" 
    }); 

    $(".right").droppable({ 
     accept: ".item", 
     drop: function(event, ui) { 
      buildItem(ui.draggable); 
     } 
    }).sortable().disableSelection(); 

    function buildItem($item) { 
     $item.clone().toggleClass("item").appendTo(".right"); 
    } 

}); 

这里有一个演示：
http://jsfiddle.net/8mBSK/
让我知道如果您有任何问题。

Answer 2

尝试这样：

HTML：

<ul id="sortable1" class="connectedSortable"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
    <li class="ui-state-highlight">Item 1</li> 
    <li class="ui-state-highlight">Item 2</li> 
    <li class="ui-state-highlight">Item 3</li> 
    <li class="ui-state-highlight">Item 4</li> 
    <li class="ui-state-highlight">Item 5</li> 
</ul> 

JAVASCRIPT：

$(function() { 
    $("#sortable1").sortable({ 
     cancel: ".ui-state-default", 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 

    $("#sortable2").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
}); 

DEMO： http://jsfiddle.net/dirtyd77/5e7X7/5/