trying to replace an element using sortable plugin on click

Question

I have a list and I am using sortable jquery UI plugin to take advantage of drag and drop ability. One thing that I love about this plugin is that it is able to update the sorted list and return it, the follwoing is a simplified example of my code:

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

And my javascript code is:

 $( function() {
$( "#sortable" ).sortable();
 var idsInOrder = $("#sortable").sortable("toArray");
                console.log("//-----------------^^^^");
                console.log(idsInOrder);

} );

Also here is the jsfiddle link :

jsfiddle link

Now what I want to do: whenever a user clicked on the li with id2 I need to replace li with id2 after the line so the first element after black line will be li with id2. If I want to do it manually without sortable plugin I have to first remove li with id2 and the append it to the dom after hr. But it will not be as simple as this since sortable maintain the order of the lists and I am not sure if it is able to update it after this action. My question is if there is anyway that I can handle this with sortable plugin? if not what is the best way of approaching it?

Answer 1

From my comment, here is amethod using dblclick event.

Working Example: 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");
   })
 });

I suspect you could try to do this with click too and I am just being overly cautious.