在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

如Sanjeev所指出的，您可以使用jQuery ui sortable widget实现第一个功能。

要回答第二个问题，可以在可排序的index()事件回调中使用index()方法，如下所示：

update

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

（mine）

Answer 2

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

达到相同的目的

但是您可以更改IDanswer在您的问题中，您可以使用The jQuery UI Sortable plugin并获取数组中ID的顺序。然后，您可以添加或删除类以实现效果。

请检查以下示例。它显示了如何使用sortable并获取数组中id的顺序。有关方法的更多详细信息，请检查文档：$('.my_class').removeClass('my_class').addClass('normal_element');

$('#your_element').attr('id','the_new_id');

http://jqueryui.com/sortable/