Question

我正在使用这个小例子测试Sortable.js列表。我有一个要拖动的元素列表，另一个列表是通过删除元素来存储它们。

注意：Sortable.js与JQuery-ui排序不同，但缺少Sortable.js文档让我考虑切换到JQuery-ui Sortable，所以我会接受使用它的答案。

问题是，丢弃区域是列表，并且有点令人沮丧地放弃该列表面板的边缘并且没有正确地删除该项目。此外，如果列表没有边框，则很难找到空列表。

Sortable.js has an attribute named ghostClass，根据文档，它应该存储drop占位符的类名。

所以我使用第二个列表面板的类名作为第一个列表的ghostClass。然而，它不起作用，只有在列表上方而不是在面板上时才能正确删除项目。

HTML：

<div class="panel panel-primary">
    <div class="panel-heading">Fruit store</div>
    <div class="panel-body">
        <ul id="fruit-list" class="list-group">
            <li href="#" class="list-group-item" data-type="apple">Apple</li>
            <li href="#" class="list-group-item" data-type="pear">Pear</li>
            <li href="#" class="list-group-item" data-type="banana">Banana</li>
            <li href="#" class="list-group-item" data-type="watermellon">Watermellon</li>
        </ul>
    </div>
</div>
<div class="panel panel-primary droppable-area">
    <div class="panel-heading">Shopping cart</div>
    <div class="panel-body">
        <ul id="cart-list" class="list-group">
            <li href="#" class="list-group-item" data-type="banana">Banana
                <div class="pull-right"> <span id="badge" class="badge">5</span>

                </div>
            </li>
            <li href="#" class="list-group-item" data-type="pear">Pear
                <div class="pull-right"> <span id="badge" class="badge">2</span>

                </div>
            </li>
        </ul>
    </div>
</div>

JS：

// Create fruit store list
var list_element = document.getElementById("fruit-list");
var fruit_list = new Sortable(list_element, {
    group: {
        name: "fruit_group",
        pull: 'clone',
        put: false
    },
    sort: false,
    ghostClass: "droppable-area",
});

// Create shopping cart list
var cart_list_element = document.getElementById("cart-list");
var cart_list = new Sortable(cart_list_element, {
    group: {
        name: "fruit_group",
        pull: true,
        put: true
    },
});

有什么想法吗？ Here is a working JSFiddle.

Answer 1

这就是ghostClass设置的作用：拖动对象时，sortablejs会创建一个占位符，如果你让它在那一瞬间就被删除。该占位符将获取ghostClass值的类设置。

在你的情况下：

删除panel-div中的“droppable-area”类名称。
创建css：。droppable-area {border：1px solid black; }

现在你会看到一个虚线框，如果你停止拖动，你的项目将会结束。

Dragable.js列表中的Drag＆amp; Drop：如何设置与Sortable列表不同的放置区域？

1 个答案: