пытается заменить элемент с помощью сортируемого плагина при нажатии

Question

У меня есть список, и я использую сортируемый 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 link

Теперь то, что я хочу сделать: всякий раз, когда пользователь нажал на литий с id2 мне нужно заменить Ли с id2 после строки так первый элемент после черной линии будет li с id2. Если я хочу сделать это вручную без сортируемого плагина, я должен сначала удалить li с id2 и добавить его в dom после hr. Но это будет не так просто, как это, поскольку sortable поддерживает порядок списков, и я не уверен, сможет ли он обновить его после этого действия. Мой вопрос в том, есть ли в любом случае, что я могу справиться с этим с помощью сортируемого плагина? если не самый лучший способ приблизиться к нему?

Answer 1

Из моего комментария, здесь isethod использует 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 тоже, и я просто быть излишне осторожным.