Question

我有一个使用jquery-ui的可排序列表：

<div id="sortable">
  <div class="ui-state-default">Item 1</div>
  <div class="ui-state-default">Item 2</div>
  <div class="ui-state-default">Item 3</div>
  <div class="ui-state-default">Item 4</div>
  <div class="ui-state-default">Item 5</div>
</div>

<script>
  $( function() {
    $( "#sortable" ).sortable({
      revert: true
    });
  } );
 </script>

在某些情况下，我希望能够将可排序列表中的项目放到另一个项目中。例如，当我将Item 1拖放到Item 3上方时，它会插入Item 3内，而不会在它之前或之后成为同级div。

我在jquery-ui文档中找不到任何东西，实际上，当我拖动另一个项目时，我需要获得它上面的项目。

Answer 1

从Sortable的基本示例中创建了以下内容。此示例的子元素用作每个列表项的子列表。

$(function() {
  function resize(t, c) {
    var h = (c * 18) + 9;
    var p = (c * 1.2) + 0.6;
    t.css("height", "calc(" + h + "px + " + p + "em)");
  }
  $("#sortable").sortable({
    connectWith: ".child-list",
    handle: ".ui-icon-arrowthick-2-n-s",
    items: "> div.ui-state-default"
  });
  $("#sortable").disableSelection();
  $(".child-list").sortable({
    connectWith: ".parent-list",
    receive: function(e, ui) {
      var numItems = $(".ui-state-default", this).length;
      resize($(this).closest(".ui-state-default"), numItems);
    },
    remove: function(e, ui) {
      var numItems = $(".ui-state-default", this).length;
      resize($(this).closest(".ui-state-default"), numItems);
    }
  });
});

#sortable {
  margin: 0;
  padding: 0;
  width: 340px;
}

#sortable>div {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}

#sortable>div>span {
  position: absolute;
  margin-left: -1.3em;
}

#sortable .child-list {
  display: block;
  width: calc(340px - 2em);
  min-height: 1em;
}

#sortable .child-list>div {
  background: #999;
  font-size: 0.8em;
}

.ui-state-highlight {
  height: 1.5em;
  line-height: 1.2em;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="sortable" class="parent-list">
  <div class="ui-state-default">
    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Item 1
    <div class="child-list">
    </div>
  </div>
  <div class="ui-state-default">
    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Item 2
    <div class="child-list">
    </div>
  </div>
  <div class="ui-state-default">
    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Item 3
    <div class="child-list">
    </div>
  </div>
  <div class="ui-state-default">
    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Item 4
    <div class="child-list">
    </div>
  </div>
  <div class="ui-state-default">
    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Item 5
    <div class="child-list">
    </div>
  </div>
</div>

使用可排序子项的receive和remove回调，可以调整列表项的大小以接受该项。这可能不是最好的示例，因为子列表的占位符并未真正正确显示。如果需要，欢迎您对其进行改进。

希望有帮助。

如何将一个项目放入列表中另一个项目内的jquery-ui可排序列表中

1 个答案: