Gridster удалить виджет, перетащив его в div

Я использую gridster.js и пытаюсь найти хороший способ настроить его, чтобы я мог перетащить один из виджетов в «корзину», например div, и удалить этот виджет из сетки. Если у кого-то есть мысли по этому поводу, было бы здорово. Вот что я нашел, но пытался найти лучший способ заставить его работать с gridster.

$(".widget").draggable();
    $('#trash-can').droppable({
        drop: function(event, ui) {
            $(ui.draggable).remove();
        }
    });

есть идеи? Заранее спасибо.


jquery jquery-ui gridster
person klye_g    schedule 10.03.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я понимаю, что этот вопрос немного устарел, и я не уверен, что вы все еще ищете решение, но мне удалось добиться этого, создав div внутри сетки gridster и по-другому стилизовав его.

Я определил функцию остановки при инициализации gridster, так что координаты находятся внутри этого div, удалите виджет.

var gridster = $(".gridster ul").gridster({
      widget_base_dimensions: [100, 55],
      widget_margins: [5, 5],
      draggable: {
         stop: function(e, ui, $widget) {
         console.log(ui);
            if (ui.position.left >435 ) gridster.remove_widget(ui.$helper[0]);
        }
      }
    }).data('gridster');

Вот рабочая (хотя и очень рудиментарная) скрипка: http://jsfiddle.net/nrC4J/

person greydnls    schedule 28.11.2013

arrow_upward
0
arrow_downward

Я также понимаю, что этот вопрос старый. Тем не менее, он все еще появляется в верхней части поиска. Я думаю, что вы были на правильном пути, удалив элемент в методе drop.

Я изменил скрипт kayladnls, чтобы использовать ваш подход, но вместо того, чтобы просто удалить его, используйте удаление gridter.

Вот скрипт, демонстрирующий функциональность перетаскивания в корзину для удаления. http://jsfiddle.net/nrC4J/46/

Редактировать: чтобы заставить его работать с текущей версией JQuery, вам нужно использовать текущую версию jquery-ui: вот скрипт с jquery 2.1.0 и jquery-ui 1.11.4 http://jsfiddle.net/nrC4J/52/

$(function () {

    // initiate Gridster
    var gridster = $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [100, 100],
    }).data("gridster")

    // set lis to Jquery draggable elements
    $(".gridster li").draggable();

    // set up drop space
    $('#log').droppable({
        drop: function (e, ui) {
            gridster.remove_widget(ui.helper.css('display', 'none'))
        }
    });

});
person BenJamin    schedule 27.02.2015
comment
Привет, это не работает с текущим jquery, не могли бы вы сообщить мне, что изменить - person ; 05.04.2015
comment
это версия jquery-ui, которую я использовал в скрипке, jquery удалил материал .browser в 1.9+, поэтому вам также нужно будет обновить версию jquery-ui до edge. Я обновил ответ версией jquery 2.1.0. - person BenJamin; 06.04.2015