Соответствует сетке относительно другого элемента

Question

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

Если я перетащу объект в область Droppable, есть ли способ, которым я могу привязать его к локальной сетке этого объекта?

Например: значок на панели инструментов находится в верхней позиции: 10; слева: 15 Пропадающая область в верхнем положении: 99; осталось: 99

Если я установлю опцию сетки перетаскиваемого объекта на [10, 10], она будет двигаться только с шагом 10 пикселей от (10, 15), например. (100, 95) является действительным, но не (99, 99). В идеале я хочу, чтобы движение сетки перетаскиваемого объекта было смещено от верхнего левого угла любого предмета, внутри которого он находился.

Вот код, который я пытался использовать:

$(function() {
    $(".draggable").draggable();
    $(".droppable").droppable({
        drop: function(event, ui) {
            ui.draggable.draggable({grid: false});
        },
        over: function(event, ui) {
            ui.draggable.draggable({grid: [20,10]});
        },
        out: function(event, ui) {
            ui.draggable.draggable({grid: false});
        },
        tolerance: "fit"
    })
});

Этот код работает нормально, но проблема в том, что независимо от того, когда сетка включена, позиция, в которой находился объект, когда он был поднят, используется для определения того, какое выравнивание сетки использовать:

1. Object starts at (0, 0)
2. Pick up, move to (5, 5), enable grid [10, 10]
3. Object aligns to a grid starting at (0, 0).
4. Disable grid, drop object at (7, 7)
5. Pick object up and enable grid [10, 10]
6. object now aligns to grid starting at (7, 7)

Есть ли способ установить смещение сетки перетаскиваемого в режиме сетки при первом перетаскивании в отбрасываемый объект?

Answer 1

Я нашел решение, которое, кажется, будет соответствовать моим требованиям. Я добавил новый div, чтобы он вел себя как маркер для позиции сетки, показывая и скрывая этот div при перетаскивании в область сбрасывания.

$(function() {
    $(".draggable").draggable();
    $(".droppable").droppable({
        drop: function(event, ui) {
            $(".ui-draggable-dragging").show();
            $(this).children(".gridmarker").hide();
        },
        over: function(event, ui) {
            // I hide like this because i'm cloning the draggable
            $(".ui-draggable-dragging").hide();
            $(this).children(".gridmarker").show();
        },
        out: function(event, ui) {
            $(".ui-draggable-dragging").show();
            $(this).children(".gridmarker").hide();
        },
    })
    .append($("<div>").addClass("gridmarker").hide());

Затем я добавил новый обработчик для события mousemove тела, который перемещает маркер сетки в соответствии с сеткой в ​​области сбрасывания:

    $("body").mousemove($.proxy(function(event){
        var leftOffset = event.pageX - $(this).offset().left;
        var topOffset = event.pageY - $(this).offset().top;
        $(this).children(".gridmarker")
            .css("left", leftOffset - leftOffset % 20)
            .css("top", topOffset - topOffset % 10);
    }, $(".droppable")));
});