Question

我只是jQuery UI的新手。我有两个div。一个在左侧，另一个在右侧。我希望当我将一个元素从左div拖到右div时，它应该对左右div进行排序。那么有人可以告诉我该怎么做吗？这是我到目前为止的代码

<div name="list-a" class="droppable">
  <h3>List A</h3>
  <div class="task-wrapper">
      <div class="draggable" id="1" name="1">
          <a href="#">Element 1</a>
      </div>
      <div class="draggable" id="2" name="3">
          <a href="#">Element 2</a>
      </div>
      <div class="draggable" id="3" name="3">
          <a href="#">Element 3</a>
      </div>
  </div>
</div>
<div name="list-b" class="droppable">
  <h3>List B</h3>
  <div class="task-wrapper">
      <div class="draggable" id="5" name="5">
          <a href="#">Element 5</a>
      </div>
      <div class="draggable" id="6" name="6">
          <a href="#">Element 6</a>
      </div>
  </div>
</div>

并且jQuery代码在这里

<script type="text/javascript">
jQuery(function() {
  jQuery(".draggable").draggable();
  jQuery(".droppable").droppable({
    drop: function(event, ui) {
      var id, state;
      state = $(this).attr("name");
      id = $(this).closest(".droppable").attr("id");
      alert("Belongs to list: " + state);
    }
 });

});
</script>

这是工作fiddle。

在这里你可以看到它正在进行拖放操作，但拖放后它没有进行排序。任何建议或帮助都会非常明显。

Answer 1

您可以考虑从connected-list jQuery UI的可排序演示开始，并相应地进行一些更改。

通过这种方式，您的列表是可排序的，您可以拖放列表中的元素，您将获得排序功能。

代码：

$(function () {
    $(".droppable>div").sortable({
        connectWith: ".connectedSortable>div"
    }).disableSelection();
});

演示：http://jsfiddle.net/IrvinDominin/RmLAA/

更新

对于空列表，只需设置容器div类的min-height并且它工作正常，一个完全空的div没有高度，因此不会触发droppable。

代码：

.task-wrapper{
    min-height: 20px;
}

演示：http://jsfiddle.net/IrvinDominin/RmLAA/1/

拖放后jQuery使用排序？

1 个答案:

更新