以编程方式移动Gridster小部件 [英] Move Gridster Widgets programmatically

问题描述

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

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

Currently i am assigning data-col and data-row attribute using Jquery but the gridster widget simply just overlapped with other gridster widgets and other widgets are not repositioning like they do while dragging the gridster widget .What should i do ? TIA.

推荐答案

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

I encountered the same problem, while trying to create an animation loop for a gridster dash. I have added a new function to the gridster src, which is basically just a very simple rewrite of the resize_widget API function. This in itself just uses mutate_widget_in_gridmap as pointed out by @Pavel.

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

I added the following after Resize_widget function:

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或其他工具来平滑过渡的好方法:)

Works like a charm for me. Tell me if you can come up with a good way to smooth the transition with JQuery or something :)

这篇关于以编程方式移动Gridster小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！