在 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 可排序小部件实现第一个功能，正如 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 2

更改 id 不是一个好的做法.
但是，您可以通过更改类$('.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>