Question

我有一个元素列表，每个元素的id都等于此列表中的顺序。现在我通过拖动它们来改变这些元素的顺序。

我有以下两个问题：

如何实现这样的效果：当元素拖动时，它会向上或向下推动元素的上方或下方？
我想动态地将这些元素的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事件回调中使用，如下所示：

＆＃13;

$("#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"));
    });
  }
});

＆＃13;

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

＆＃13;

相关answer（我的）

Answer 2

改变ID并不是一种好习惯但是，您可以通过更改班级$('.my_class').removeClass('my_class').addClass('normal_element');

来实现相同的功能

但是你可以改变这个$('#your_element').attr('id','the_new_id');的身份证在您的问题中，您可以使用 jQuery UI可排序插件并获取数组中的ID顺序。
然后，您可以添加或删除类以实现影响。

检查以下示例。它显示了如何使用sortable并获取数组中id的顺序。有关方法的更多详细信息，请查看doc：http://jqueryui.com/sortable/

＆＃13;

$(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());
    
        
        }
    });
       
});

＆＃13;

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

＆＃13;

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

2 个答案: