当拖动到指定的div时如何删除Gridstack.js小部件

Question

I'm trying to get widgets in a grid to get removed when a widget is dragged into a separate Div, but I can't seem to get it working using 'removable' in the grid's options.

I've been through the docs ( https://github.com/gridstack/gridstack.js/tree/develop/doc ) and tried different options that are on there as well as tried to replicate one of the demos that has the functionality working ( http://gridstackjs.com/demo/two.html ) I've looked for other people who've had these issues too but can't find any posts that were able to help with this problem.

The First Div is where I want to drag the widgets to, and the second is where I'll be dragging them from.

    <div class = 'trash ui-droppable'>
        <h1 class = 'text-center pt-4'><?= FontAwesome::light('trash'); ?> 
    </h1>
    </div>

    <div class = 'grid-stack mt-3 ui-droppable'>
        <!-- Widgets set here -->
    </div>

Here's the JQuery which sets the grid's options, the option that I think should be allowing widgets to be dropped into is removeable and set it to the first Div's class name of ".trash".

    var options = {
        cellHeight: 100,
        verticalMargin: 10,
        removable: '.trash'
    };
    $('.grid-stack').gridstack(options);

What should be happening is I drag a widget over to the top Div, and the widget should be removed from the grid entirely but instead when dragged out and released acts like it's been dragged out the grid and places it back to where it was.

Answer 1

我遇到了同样的问题，此问题已通过为垃圾箱div设置最小高度（例如75px）来解决。