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

我有一个元素列表，每个元素都有一个id，它等于它在此列表中的顺序。现在我正在通过拖动它们来改变这些元素的顺序。查找JQuery UI拖放后列表中元素的索引

我有以下两个问题：

我怎样才能做到这一点，当元件被拖动周围，它会推高或下降，这是高于或低于它的元素的影响？
我想动态地将这些元素的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>

来源

2014-12-13 shapeare

可以实现使用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（矿）

来源

2014-12-13 11:55:08

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

来源

2014-12-13 10:39:09

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

回答

相关问题