jQuery Dragable и Resizable конфликтуют

Я использую подключаемый модуль Gridster (http://gridster.net). Я нашел обновленную демонстрацию на Github, размер которой можно изменить. Я также добавил плагин jQuery livequery, чтобы хорошо сочетаться с будущими элементами.

После добавления новых элементов сетки работает либо перетаскивание, либо изменение размера. Предметы по умолчанию работают нормально, только проблема с новыми предметами. Вот как я использую код:

Изменить размер + перетащить

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/

Пожалуйста, помогите мне сделать это.

С Уважением.


person user1915190    schedule 21.04.2013    source источник


Ответы (2)


Я настоятельно рекомендую использовать пример сетки jQueryUI Sortable:

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

person professormeowingtons    schedule 16.06.2013

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

Пожалуйста, добавьте class="gs_w" в атрибут тега <li>, как я сделал выше

person ferozcoder    schedule 12.01.2015