Question

所以我正在寻找的是一种让我在同一元素上使用sortable和droppable的方法。假设我有一个包含5个元素的列表，这些元素都是可排序的。我想要做的是当一个元素被放在另一个元素的顶部时，它会附加到该元素并退出列表，例如：

<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

元素已被删除

<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item 
        <ul>
              <li>List Item Dropped</li>
        </ul>
    </li>

</ul>

如果你有一个答案或指导如何做到这一点，将非常感谢！

Answer 1

HTML：

<ul id="theUL">
    <li class="item">List Item</li>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
    <li class="item">List Item</li>
</ul>

以下是UL的可排序代码。您需要配置更改事件。排序事件发生时发生更改事件，否则表示发生了丢弃事件。

$("#theUL").sortable({
    revert: true,
    items: "li",
    change: function( event, ui ) {ui.helper.addClass("change");},
    beforeStop: function( event, ui ) {ui.helper.removeClass("change");}
});

在可删除代码中，检查是否发生了更改，如果没有，则表示删除。

$(".item" ).droppable({
    accept: function(el) {
        return el.hasClass('item');
    },
    drop: function (event, ui) {
        item=ui.draggable;
        if(!item.hasClass('change')){
            //dropped!
        }
    }

}）;

Answer 2

考虑到您可以在不使用 Droppable 的情况下执行此操作。可以用 pm.collectionVariables.set('collection_var_key', 'some_collection_variable'); console.log(pm.collectionVariables.get('collection_var_key'); 来完成。它只需要在那里添加第二个 List。

box-shadow

connectWith

$(function() {
  $(".sort").sortable({
    connectWith: ".sort",
    handle: "span.ui-icon",
    placeholder: "ui-state-highlight"
  });
  $("#sortable").disableSelection();
});

如果需要，您可以创建一个函数，在初始化时为您附加所有这些内容。

.top,
.child {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

.child {
  padding-bottom: 0.5em;
}

.top li {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
}

.top li span {
  margin: 3px;
  cursor: grab;
}

jQuery可排序和可放置列表

2 个答案: