查找JQuery UI拖放後列表中元素的索引

Question

我有一個元素列表，每個元素都有一個id，它等於它在此列表中的順序。現在我正在通過拖動它們來改變這些元素的順序。

我有以下兩個問題：

1. 我怎樣才能做到這一點，當元件被拖動周圍，它會推高或下降，這是高於或低於它的元素的影響？

2. 我想動態地將這些元素的id改爲它們在列表中的順序。例如，假設有四個元素，當第一個元素被拖動到底部時，它的id將變爲3，並且它上面的元素的id將相應地改變。 （請注意，元素不一定相等的高度。）

這裏是我的代碼片段，您可以訪問http://jsfiddle.net/shapeare/bL8jz3rp/4/瞭解更詳細的代碼：

<div id="container"> 
    <div class="draggable" id="0"> 
     <p> dummy text </p> 
     <p> dummy text </p> 
    </div> 

    <div class="draggable" id="1"> 
     <p> dummy text dummy text </p> 
    </div> 

    <div class="draggable" id="2"> 
     <p> dummy text dummy text dummy text </p> 
    </div> 

    <div class="draggable" id="3"> 
     <p> dummy text dummy text dummy text </p> 
    </div> 

</div> 

Answer 1

可以實現使用jQuery ui sortable widget第一功能，如Sanjeev已經指出。

要回答你的第二個問題，你可以使用index()方法內update事件回調的排序如下圖所示：

$("#container").sortable({ 
 
    update: function(e, ui) { 
 
    $("#container div").each(function(i, elm) { 
 
     $elm = $(elm); // cache the jquery object 
 
     $elm.attr("id", $elm.index("#container div")); 
 
     // below is just for demo purpose 
 
     $elm.text($elm.text().split("id")[0] + "id: " + $elm.attr("id")); 
 
    }); 
 
    } 
 
});

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
<div id="container"> 
 
    <div class="draggable" id="0"> 
 
    <p>dummy text</p> 
 
    </div> 
 

 
    <div class="draggable" id="1"> 
 
    <p>dummy text dummy text</p> 
 
    </div> 
 

 
    <div class="draggable" id="2"> 
 
    <p>dummy text dummy text dummy text</p> 
 
    </div> 
 
    <div class="draggable" id="3"> 
 
    <p>dummy text dummy text dummy text</p> 
 
    </div> 
 

 
</div>

---

相關answer（礦）

Answer 2

改變IDS是不是良好的做法。
但是你可以通過改變$('.my_class').removeClass('my_class').addClass('normal_element');

類實現相同affet但你可以改變ID這樣$('#your_element').attr('id','the_new_id');
在你的問題，你可以使用的jQuery UI的可排序插件，並得到一個數組中ID的順序。
然後，您可以添加或刪除類以實現影響。

檢查下面的例子。它演示瞭如何使用可排序並獲取數組中ID的順序。 有關方法的詳細信息檢查文檔：http://jqueryui.com/sortable/

$(function(){ 
 
    
 
    $("#sortable").sortable(); 
 
    var idArr=$(".myList").sortable("toArray"); 
 
    jQuery(".IdList").text(idArr.join()); 
 
    $(".myList").sortable({ 
 
     stop: function(event, ui) { 
 
      
 
       var idArr=$(".myList").sortable("toArray"); 
 
       jQuery(".IdList").text(idArr.join()); 
 
    
 
     
 
     } 
 
    }); 
 
     
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 

 
<strong>Id Order:</strong><div class="IdList"></div><br /> 
 
<strong>Drag Items to reorder</strong><br /> 
 
<ul id="sortable" class="myList"> 
 
    <li id="1">Item 1</li> 
 
    <li id="2">Item 2</li> 
 
    <li id="3">Item 3</li> 
 
    <li id="4">Item 4</li> 
 
    <li id="5">Item 5</li> 
 
</ul>