jQuery Dragable和Resizable冲突

Question

我正在使用Gridster插件（http://gridster.net）。我在Github上发现了一个可更改大小的更新演示。我还添加了jQuery livequery插件，以便与未来的项目保持一致。

添加新的网格项后，draglable/resizable工作正常。默认项目工作正常，只有新项目的问题。这是我如何使用代码：

调整大小并拖动

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); 
}); 

请检查的jsfiddle以及http://jsfiddle.net/PrtrR/51/

请帮助我这样做。

问候。

Answer 1

我会强烈建议使用jQueryUI的可排序的网格例如：

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

Answer 2

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

请<li>标签属性添加class="gs_w"正如我上面做