JQueryUI - изменение droppable.touch - PullRequest
Новая
       30

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

0 голосов
/ 29 октября 2018

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

$('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 установлен в высоту = 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.

Итак, мой вопрос: есть ли способ «актуализировать» ОТКЛЮЧЕННУЮ ОБЛАСТЬ в рамках события «over»? Я пытался изменить событие сбрасывания в событии «over», я также пытался изменить допуск в событии «over», но, похоже, ничего не работает.

Есть идеи?

1 Ответ

0 голосов
/ 29 октября 2018

Решение:

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

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

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

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

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

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

Проблема решена!

...