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

shapeare 发表于 Dev

形状

我有一个元素列表，每个元素都有一个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>

正如Sanjeev已经指出的那样，您可以使用jQuery ui可排序小部件来实现第一个功能。

要回答第二个问题，可以使用事件回调中可排序的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>