jQuery可拖动且可调整大小
我正在使用Gridster插件()。我在Github上发现了一个更新的演示,它可以调整大小。我还添加了jQueryLiveQuery插件,以便更好地处理未来的项目 添加新网格项后,可拖动/可调整大小两个选项中的任何一个都起作用。默认项工作正常,只是新项的问题。以下是我使用代码的方式: 调整大小并拖动jQuery可拖动且可调整大小,jquery,html,jquery-ui-resizable,gridster,Jquery,Html,Jquery Ui Resizable,Gridster,我正在使用Gridster插件()。我在Github上发现了一个更新的演示,它可以调整大小。我还添加了jQueryLiveQuery插件,以便更好地处理未来的项目 添加新网格项后,可拖动/可调整大小两个选项中的任何一个都起作用。默认项工作正常,只是新项的问题。以下是我使用代码的方式: 调整大小并拖动 var layout; var grid_size = 30; var grid_margin =5; $(function() { layout = $('.layouts_grid u
var layout;
var grid_size = 30;
var grid_margin =5;
$(function() {
layout = $('.layouts_grid ul').gridster({
widget_margins: [grid_margin, grid_margin],
widget_base_dimensions: [grid_size, grid_size],
serialize_params: function($w, wgd) {
return {
x: wgd.col,
y: wgd.row,
width: wgd.size_x,
height: wgd.size_y,
id: $($w).attr('data-id'),
name: $($w).find('.block_name').html(),
};
},
min_rows: block_params.max_height
}).data('gridster');
$('.layout_block').livequery(function(){
$('.layout_block').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);
}
});
});
//This works only for default items
$('.ui-resizable-handle').hover(function() {
layout.disable();
}, function() {
layout.enable();
});
});
添加项目
$('#add').click(function(){
var tmpP = '<li class="layout_block new ui-resizable ui-resizable-autohide" style="background-color: #B60000;">New one</li>'
var gridster = $(".layouts_grid ul").gridster().data('gridster');
gridster.add_widget(tmpP, 2, 1);
});
$('#添加')。单击(函数(){
var tmpP='
请同时检查JSFIDLE
请帮我做这个
注意。我强烈建议使用jQueryUI Sortable的网格示例:
$('#添加')。单击(函数(){
var tmpP='
请在
标记属性中添加class=“gs\u w”
,就像我上面所做的那样
$('#add').click(function(){
var tmpP = '<li class="gs_w layout_block new ui-resizable ui-resizable-autohide" style="background-color: #B60000;">New one</li>'
var gridster = $(".layouts_grid ul").gridster().data('gridster');
gridster.add_widget(tmpP, 2, 1);
});