Javascript 拖放；Drop at Sortable.js list：如何设置不同于可排序列表的放置区域？

我正在用这个小示例测试

Sortable.js

列表。我有一个要从中拖动的元素列表，还有一个通过拖放元素来存储它们的列表

<强>注释：SoStable .js不同于jQuery UI可排序，但缺少SoTabel.js文档使我考虑切换到jQuery UI可排序，因此我将接受使用它的答案。<强>

问题是，放置区域就是列表，如果放置在列表面板的边缘，而没有正确地放置项目，会有点令人沮丧。此外，如果列表没有边框，那么当列表为空时很难找到它

，并且根据文档，它应该存储放置占位符的类名

所以我使用第二个列表面板的类名作为第一个列表的ghostClass。尽管如此，它仍然不起作用，只有在列表上方而不是面板上方时，项目才能正确地放下

HTML:

---

有什么想法吗

这就是ghostClass设置的作用： 当拖动一个对象时，sortablejs会创建一个占位符，如果您立即放开该项目，它将被放置在该占位符中。该占位符将获得为其设置的ghostClass值的类

就你而言：

• 删除panel-div中的“droppable area”类名
• 创建css:.可拖放区域{边框：1px纯黑色；}

现在，您将看到一个虚线框，表示如果停止拖动，项目将在何处结束

<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>

// 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
    },
});