尝试在单击时使用可排序插件替换元素

Question

我有一个列表，我正在使用 sortable jquery UI 插件来利用拖放功能。我喜欢这个插件的一件事是它能够更新排序列表和 return 它，下面是我的代码的一个简化示例：

<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 link：

jsfiddle link

现在我想做的是：每当用户单击带有 id2 的 li 时，我需要在该行之后用 id2 替换 li，这样黑线之后的第一个元素将是带有 id2 的 li。如果我想在没有 sortable 插件的情况下手动完成，我必须首先删除带有 id2 的 li 并将其附加到 hr 之后的 dom 。但它不会这么简单，因为 sortable 维护列表的顺序，我不确定它是否能够在此操作后更新它。我的问题是我是否可以使用 sortable 插件来处理这个问题？如果不是，最好的方法是什么？

Answer 1

根据我的评论，这是使用 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 来做到这一点，我只是过于谨慎了。

尝试在单击时使用可排序插件替换元素

trying to replace an element using sortable plugin on click

jquery

jquery-ui

jquery-ui-sortable

jquery-ui-draggable

jquery-ui-droppable