jQuery UI：动态添加元素以进行排序

Question

我正在动态构建一个可排序列表，但是当动态添加元素时，sortable开始表现不正确：

function buildHTML() {
    var selection = ['number', 'items', 'list'];
    var component = $('#selector');
    component.empty();

    for (var i = 0; i < selection.length; i++) {
        component.append('<li class="drag-button"> ' + selection[i] + '</li>');
    }

    component.sortable('refresh');
}

$('#selector').sortable({ 
    tolerance: 'pointer',
    cursor: 'move',
    axis: 'x'
});

buildHTML(); 

通常在拖动时，被拖动的物品将能够穿过另一个物品而不会移动到空位置。

可以在这里找到一个例子：http://jsfiddle.net/LRkg4/

在拖动项目“数字”时，它通常能够通过项目“列表”而没有“列表”向左移动。从静态版本开始，感觉完全不同，不是那么活泼：http://jsfiddle.net/cbXK3/1/，我首先构建HTML，然后创建可排序的：

buildHTML();
$('#selector').sortable({...});

Answer 1

这很奇怪。查看两者之间的来源看起来相同。必须是jQuery引擎盖下的东西，这是不对的。

这可能不是你正在寻找的答案，但它的工作原理，项目排序是活泼的。一个简单的破坏，添加你的动态项目，然后重建：http://jsfiddle.net/BzfY3/3/（见一切小提琴）

<ul id="selector">
    <li class="drag-button">some</li>
    <li class="drag-button">inital</li>
    <li class="drag-button">stuff</li>
</ul>
<br/><br/><br/><br/>
<input type="button" value="Add some sortable items and rebuild it" onclick="reBuildIt()">

<script>
//this function will destroy, add your new items, then rebuild it
window.reBuildIt=function() {
    var selection = ['number', 'items', 'list'];
    var component = $('#selector');
    component.sortable('destroy');

    for (var i = 0; i < selection.length; i++) {
        component.append('<li class="drag-button"> ' +
        selection[i] + 
        '</li>');
    }

    $('#selector').sortable({ tolerance: 'pointer', cursor: 'move', axis: 'x' }); 
}

//show any initial sortable items
$('#selector').sortable({ tolerance: 'pointer', cursor: 'move', axis: 'x' });
</script>