时间戳

首页 > 解决方案 > 如何在拖动到指定的 div 时删除 Gridstack.js 小部件

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

问题描述

我试图在将小部件拖入单独的 Div 时删除网格中的小部件，但我似乎无法使用网格选项中的“可移动”使其工作。

我已经阅读了文档（https://github.com/gridstack/gridstack.js/tree/develop/doc）并尝试了那里的不同选项，并尝试复制具有该功能的演示之一工作（http://gridstackjs.com/demo/two.html） 我已经寻找过其他也遇到过这些问题的人，但找不到任何能够帮助解决这个问题的帖子。

第一个 div 是我要将小部件拖到的位置，第二个是我将从中拖动它们的位置。

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

这是设置网格选项的 JQuery，我认为应该允许将小部件放入的选项是可移除的，并将其设置为第一个 Div 的类名“.trash”。

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

应该发生的事情是我将一个小部件拖到顶部 Div，并且该小部件应该从网格中完全删除，但是当拖出并释放时，就像它被拖出网格并将其放回原处一样。

标签： javascriptphpjquerygridstack

解决方案

我遇到了同样的问题，通过给垃圾 div 一个最小高度（比如 75px）来解决这个问题。

推荐阅读