JQueryUI - изменение droppable.touch

Question

В настоящее время я пытаюсь создать расширенную зону для сбрасывания, но у меня возникли некоторые проблемы. Вот код (пояснение ниже):

$('div#1').find('div[cid="draggable"]').each(function(i, e) {
    $(e).after("<div id='drp' style='width:100%;'></div>");
    $('div#drp').droppable({
        drop:function(event, ui) {
            ajaxCall = false;
            ui.draggable.css("left", "0");
            ui.draggable.css("top", "0");
            $(event.target).after(ui.draggable);

            $(this).css("height", "0px");
            $(this).removeClass("isDroppable");
            $(this).removeClass("mb-1");

            var t = ui.draggable.attr("i");

            // callPage(81758758, 'POST', {t:t,s:0}, '');
        },
        over:function(event, ui) {
            $(this).css("height", (parseInt(ui.helper.css("height")) + 50)+"px");
            $(this).addClass("isDroppable");
            $(this).addClass("mb-1");

            if($(this).prev().attr("o") < ui.helper.attr("o")) {
                // Move to top : Un padding s'ajoute, étrangement.

            }
        },
        out:function(event, ui) {
            $(this).css("height", "0px");
            $(this).removeClass("isDroppable");
            $(this).removeClass("mb-1");
        },
        accept:function(d) {
            if(d.attr("cid") == "draggable" && d.attr("i") != $(this).prev().attr("i")) {
                return true;
            }
        },
        tolerance:'touch'
    });
});

На самом деле, я создаю для каждого потомка div#0 div#drp. Это означает, что, если у меня есть, в div#0, 5 div#card, для каждой div # card я буду иметь div#drp (width:100%, height:0) на общую сумму 5 div # DRP. Как вы должны понимать, каждый div # drp является ОБЪЕМОМ ОТКЛЮЧЕНИЯ (и каждая карта div # может быть сброшена на каждом div # drp).

Но вот проблема: единственный способ заставить это работать - установить допуск, как это указано в моем коде, к "прикосновению", пока "указатель", "пересечение" и "подгонка" никогда не будут работать из-за Для div # drp установлено значение height = 0px.

Теперь представьте следующую структуру:

<div id="card" i="1" style="width:100%;height:300px;">CARDTEST</div>
<div id="grp" i="1" style="width:100%;height:0;"></div>
<div id="card" i="2" style="width:100%;height:100px;">CARDTEST</div>
<div id="grp" i="2" style="width:100%;height:0;"></div>
<div id="card" i="3" style="width:100%;height:100px;">CARDTEST</div>
<div id="grp" i="3" style="width:100%;height:0;"></div>

Здесь, если я перееду 2-ю или 3-ю карту, все будет хорошо. Но если я переместу первую карту (с высотой: 300px):

Во-первых, высота id # grp будет установлена ​​на "(parseInt (ui.helper.css (" height ")) + 50) +" px "", это означает 350px.

Во-вторых, даже при этом моя первая карта вызовет первый div # drp и второй div # drp, если его высота слишком велика. Это как если бы изменение высоты моего div # drp не расширило мою DROPPABLE область.

Итак, мой вопрос: есть ли способ "актуализировать" DROPPABLE AREA в рамках "over" события? Я пытался изменить событие сбрасывания в событии "over", я также пытался изменить допуск в событии "over", но, похоже, ничего не работает.

Любая идея?

Answer 1

Решение:

В Droppable() нет ничего, что делало бы это возможным. Однако можно обновить позиции DROPPABLE AREA в параметрах Draggable. Увидеть ниже:

$( ".selector" ).draggable({
    refreshPositions: true
});

Я не ожидал, что свойство DROPPABLE будет редактируемым через элементы DRAGGABLE. Обратите внимание, что согласно документации:

"Если задано значение true, все позиции сбрасывания рассчитываются при каждом перемещении мыши. Внимание: это решает проблемы на высокодинамичных страницах, но резко снижает производительность".

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

Обратите внимание, что это значение конфигурации также исправит поля, вызванные любым элементом, добавленным в Droppable.over, если Draggable элемент находится под элементом Droppable (например, если вы хотите сделать то же самое, что и Sortable(), но с Draggable() & Возможность удаления ()).

Задача решена!