Tag: gridster

在gridster中resize后,获取小部件的维度将数据序列化为JSON

我试图在更改框的大小和位置后获取序列化JSON数据。 但我只获得了加载细节。 如何在调整框大小后获取序列化数据。 而且我还想获​​得该框的文本(框中的值)。 这是我的代码: $(function() { var gridster = $(“.gridster > ul”).gridster({ widget_margins: [10, 10], widget_base_dimensions: [230, 160], helper: ‘clone’, resize: { enabled: true, }, serialize_params: function($w, wgd) { return { text: $($w).attr(‘.drop’), col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y }; } }).data(‘gridster’); //serialization// var gridster = $(“.gridster > ul”).gridster().data(‘gridster’); gridData = gridster.serialize(); […]

如何通过动态创建的id从gridster.js中删除单个小部件

我需要知道如何使用gridster.add_widget通过动态创建的id删除单个gridster.js小部件。 创建的每个新窗口小部件都有一个自己的按钮来删除该单个窗口小部件,但我无法使其工作。 这是我的代码 $(document).ready(function(){ var count = 0; var newid = count + 1; $(document).on(“click”, “#newGrid”, function() { var gridster = $(“.gridster ul”).gridster().data(‘gridster’); gridster.add_widget(‘Hello, now delete me x’,2 ,1); }); $(document).on(‘click’, ‘#remove’+newid, function() { var gridster = $(“.gridster ul”).gridster().data(‘gridster’); gridster.remove_widget( ‘#block’+newid ); }); }); 对于添加小部件,它工作正常,但我无法删除小部件。

调整框大小后,不会让gridster序列化数据

我想在改变盒子的大小和位置后获得序列化数据。 但我只获得了加载细节。 如何在调整框大小后获取序列化数据。 而且我还想获​​得该框的文本(框中的值)。 这是我的代码: $(function() { var gridster = $(“.gridster > ul”).gridster({ widget_margins: [10, 10], widget_base_dimensions: [230, 160], helper: ‘clone’, resize: { enabled: true, }, serialize_params: function($w, wgd) { return { id: $($w).attr(‘.drop’), col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y }; } }).data(‘gridster’); //serialization// var gridster = $(“.gridster > ul”).gridster().data(‘gridster’); gridData = gridster.serialize(); […]

如何将元素从一个网格拖到另一个网格?

有没有人试图将一个细胞从一个Gridster拖到另一个? 我一直试图让它工作……但没有运气。 有什么帮助吗?

在使用可点击内容拖动gridster.js小部件后,如何避免单击事件触发?

我正在使用Gridster( http://gridster.net/ ),它可以拖动li的内容。 我的li有一个可点击的div。 content 所以这里是我面临的问题,当我停止并释放拖动时,它将调用div中的单击,我如何只是拖动div,而不是在拖动停止和释放后调用单击。 我不希望它在拖动后重定向到另一个页面(用户拖动和释放..因为当拖动时,它需要单击div,同时,div可以被点击,所以当停止并释放拖动时,它将调用点击) $(function(){ //DOM Ready var gridster = $(“.gridster ul”).gridster( { widget_margins: [5, 5], widget_base_dimensions: [128, 130], max_size_y: 2, max_size_x: 2, extra_cols: 6 } ).data(‘gridster’); //which i tried but failed gridster.draggable.stop(){ onclick = “false”; } // gridster.resize_widget($(‘.gridster li’).eq(0), 1,1); }); 或任何人都可以提供有关如何调用或使用gridster提供的function的提示 draggable.stop:function(event,ui){}拖动停止时的回调。 我想这里会有一些实现。 最初的解决方案,但仍然没有工作 var gridster ,draggable ; $(function () […]

如何使Gridster添加小部件可resize?

我把我的项目基于这个小提琴 但我已经做到了,所以你可以使用以下方法添加小部件: $(document).on(“click”, “#add”, function() { var gridster = $(“.layouts_grid ul”).gridster().data(‘gridster’); gridster.add_widget(‘X’, 1, 1) .resizable({ grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)], animate: false, minWidth: grid_size, minHeight: grid_size, containment: ‘#layouts_grid ul’, autoHide: true, stop: function(event, ui) { var resized = $(this); setTimeout(function() { resizeBlock(resized); }, 300); } }); 现在这个工作,它确实创建了一个新的小部件,但小部件不能resize。 虽然它是用所需的类和id创建的,但我认为这是因为它是一个动态添加的小部件。 有什么方法可以让这个工作吗? […]