以编程方式移动 Gridster 小部件答案

【问题标题】：Move Gridster Widgets programmatically以编程方式移动 Gridster 小部件
【发布时间】：2014-12-11 17:58:59
【问题描述】：

我正在尝试以编程方式移动 Gridster 小部件，我想实现类似于拖动 gridster 小部件的效果。

目前我正在使用 Jquery 分配 data-col 和 data-row 属性 但是 gridster 小部件只是 与其他小部件重叠gridster 小部件 和其他小部件没有像拖动 gridster 小部件时那样重新定位。我该怎么办？ TIA。

【问题讨论】：

向我们展示您正在使用的代码或创建一个 jsFiddle，以便我们查看问题所在。

标签： javascript jquery gridster

【解决方案1】：

我在尝试为 gridster dash 创建动画循环时遇到了同样的问题。我在 gridster src 中添加了一个新函数，它基本上只是对 resize_widget API 函数的一个非常简单的重写。正如@Pavel 所指出的，这本身只是使用 mutate_widget_in_gridmap。

我在 Resize_widget 函数之后添加了以下内容：

fn.move_widget = function($widget, new_col, new_row, callback) {
    var wgd = $widget.coords().grid;

    var new_grid_data = {
        col: new_col,
        row: new_row,
        size_x: wgd.size_x,
        size_y: wgd.size_y
    };

    this.mutate_widget_in_gridmap($widget, wgd, new_grid_data);

    this.set_dom_grid_height();
    this.set_dom_grid_width();

    if (callback) {
        callback.call(this, new_grid_data.col, new_grid_data.row);
    }

    return $widget;
};

对我来说就像一个魅力。告诉我你是否能想出一个用 JQuery 或其他东西平滑过渡的好方法:)

【讨论】：

这实际上效果很好。唯一的事情是使用最小化版本的 gridster 它应该是 o.move_widget.... 在 resize_widget 函数之后。

【解决方案2】：

我没有找到对应的API方法，但是你可以查一个mutate_widget_in_gridmap函数：http://gridster.net/docs/files/src_jquery.gridster.js.html#l496

您还可以查看类似的库 gridstack.js：https://github.com/troolee/gridstack.js 由于 gridster 的限制，我已经启动了这个库。它反应灵敏，bootstrap v3 和淘汰赛友好。该库正在积极开发中，因此我可以实现任何合理的功能请求。

【讨论】：

您好，感谢您的回复。我将尝试 mutate_widget_in_gridmap 方法，还有一件事是是否可以简单地创建鼠标按下和鼠标事件并附加到 gridster 小部件 (li) 以便它可以产生相同的效果？
我很确定你不能这样做。