我有一个我想要排序的列表.我通过使用jQuery UI Sortable完成了这个.我想要做的是使用自定义占位符来清除列表项的位置.我无法弄清楚的是如何制作一个占位符,它是被排序项目的克隆.我想要显示正在排序的项目的克隆,而不是空的占位符,这样你就可以得到一种“预览”.
简而言之,ui.item [0] .outerHTML是我想用作自定义占位符的东西,我似乎无法得到它.
<script>
$(function() {
$( "#menu" ).sortable({
start: function(event,ui) {
console.log(ui.item[0].outerHTML);
},placeholder: {
element: function(event,ui) {
console.log(ui.item[0].outerHTML);
}
}
});
$( "#menu" ).disableSelection();
});
</script>
以上是我现在所拥有的,但这显然不起作用.有没有一种简单的方法来完成这项工作,只能进行排序？
解决方法
经过一些修修补补(我从这个
related question中获得灵感),我得出了以下解决方案：
在开始事件中,我克隆正在排序的原始项目.我将克隆传递给占位符,我可以在其中更新它的内容. (ui.item不在这里)
<script>
$(function() {
$("#menu").sortable({
start: function( event,ui ) {
clone = $(ui.item[0].outerHTML).clone();
},placeholder: {
element: function(clone,ui) {
return $('<li class="selected">'+clone[0].innerHTML+'</li>');
},update: function() {
return;
}
}
});
});
</script>
