jQuery UI:动态添加元素到可排序
jQuery UI:动态添加元素到可排序
提问于 2014-02-18 22:59:07
我正在动态地构建一个可排序列表，但是当动态添加元素时，排序表开始不正确地运行：
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({...});Stack Overflow用户
发布于 2014-02-19 00:35:19
太奇怪了。查看两者之间的源看起来是相同的。一定是在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21867351
复制相关文章
相似问题
腾讯云开发者
