javascript - 在 Sortable.js 中拖放列表 : How to set a different drop area than a Sortable list?

Question

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

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

问题是，放置区域是列表，将其放置在列表面板的边缘并且无法正确放置项目有点令人沮丧。另外，如果列表没有边框，则很难找到空列表。

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

所以我使用第二个列表面板的类名作为第一个列表的 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; }

现在，您将看到一个虚线框，表示如果停止拖动，项目将最终到达的位置。