以编程方式移动网格小组件

Move Gridster Widgets programmatically

本文关键字：网格 组件 移动网 移动 编程 方式      更新时间：2023-09-26

我正在尝试以编程方式移动网格小部件，我想达到拖动网格小部件的效果。

目前，我正在使用 Jquery 分配数据列和数据行属性，但网格小部件只是与其他网格小部件重叠，其他小部件不像拖动网格小部件时那样重新定位。我该怎么办？蒂亚。

我在尝试为网格破折号创建动画循环时遇到了同样的问题。我在 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 或 :)<</p>

div class="answers" 的东西来平滑过渡的好方法>

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

你也可以检查类似的库网格堆栈.js：https://github.com/troolee/gridstack.js 由于网格限制，我启动了这个库。它响应迅速，引导 v3 和淘汰赛友好。该库正在积极开发中，因此我可以实现任何合理的功能请求。

相关文章：