我有一个列表,我正在使用可排序的jquery UI插件来利用拖放功能。我喜欢这个插件的一件事是它能够更新排序列表并返回它,以下是我的代码的简化示例:
<ul id="sortable">
<li class="ui-state-default" id="id1"><span class="ui-icon ui-icon- arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default" id="id2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default" id="id3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<hr/>
<li class="ui-state-default" id="id4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default" id="id5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default" id="id6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default" id="id7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
我的JavaScript代码是:
$( function() {
$( "#sortable" ).sortable();
var idsInOrder = $("#sortable").sortable("toArray");
console.log("//-----------------^^^^");
console.log(idsInOrder);
} );
这里也是jsfiddle链接:
JSFIDDLE 链接
现在我想做的是:每当用户点击带有 id2 的 li 时,我都需要在该行之后用 id2 替换 li,这样黑线后的第一个元素将是带有 id2 的 li。如果我想在没有可排序插件的情况下手动执行此操作,我必须首先使用 id2 删除 li,然后在 hr 后将其附加到 dom。但它不会这么简单,因为可排序维护列表的顺序,我不确定它是否能够在此操作后更新它。我的问题是,我是否可以使用可排序的插件来处理这个问题?如果不是,最好的方法是什么?
根据我的评论,这是使用dblclick
事件的方法。
工作示例:https://jsfiddle.net/Twisty/61mg55gx/
$(function() {
$("#sortable").sortable({
items: "> li[id^='id']"
});
var idsInOrder = $("#sortable").sortable("toArray");
console.log("//-----------------^^^^");
console.log(idsInOrder);
$("#sortable li[id='id2']").dblclick(function(e) {
console.log("ID 2 has been double clicked.");
$("#sortable li[id='id4']").after($(this).detach());
$("#sortable").sortable("refresh");
})
});
我怀疑你也可以尝试用click
来做这件事,我只是过于谨慎了。