試圖用可分類的插件替換元素點擊

我有一個列表，我使用可排序的jQuery UI插件來利用拖放功能。我喜歡這個插件的一件事是，它是能夠更新排序列表並返回它的follwoing是我的代碼一個簡單的例子：試圖用可分類的插件替換元素點擊

<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李黑線後將與id2一起。如果我想手動執行而無需排序插件，則必須先用id2刪除li，然後在hr後將其附加到dom。但它不會像這樣簡單，因爲可排序維護列表的順序，我不確定它是否能夠在此操作後更新它。我的問題是，如果無論如何我可以用可排序的插件來處理這個問題？如果不是，接近它的最好方法是什麼？

來源

2017-01-11 Hamed Minaee

小提琴中沒有'

'？我沒有得到你想要達到的目標。 – ppasler

@ppasler我更新了代碼 –

謝謝，但我沒有得到這個問題:) – ppasler

從我的評論，這裏是使用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也需要這樣做，我只是過於謹慎。

來源

2017-01-12 01:29:57 Twisty

試圖用可分類的插件替換元素點擊

回答

相關問題