Geek Answers Handbook

JQuery Dragable and Resizable conflicting

I am using the Gridster plugin ( http://gridster.net ). I found an updated demo on Github that is subject to change. I also added the jQuery livequery plugin to blend in well with future elements.

After adding new mesh elements, either dragable / resizable works. The default elements work fine, only the problem with the new elements. This is how I use the code:

Resize + Drag & Drop

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 item

 $('#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); });

Please check also JSFiddle http://jsfiddle.net/PrtrR/51/

Please help me do this.

Sincerely.

+4
source share
2 answers

I highly recommend using the jQueryUI Sortable sorting example:

http://jqueryui.com/sortable/#display-grid

+1
source 
 $('#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); });

Add class="gs_w" to the <li> tag attribute, as I said above

0
source

More articles:


All Articles