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.
