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 的每个 child 创建一个 div#drp。这意味着如果我在 div#0, 5 div#card 中，我将对每个 div#card 有一个 div#drp（宽度： 100%，height:0)，总计 5 div#drp。正如您应该了解的那样，每个 div#drp 都是一个可放置区域（每个 div#card 都可以放置在每个 div#drp 上）。

但这就是问题所在：实现此功能的唯一方法是将公差设置为 "touch"，只要 "pointer"、"intersect" & "fit" 永远不会工作，因为 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>

在这里，如果我移动第二张或第三张卡，一切都会好起来的。但是如果我移动第一张牌（height:300px）：

首先，id#grp的高度会被设置为“(parseInt(ui.helper.css("height")) + 50)+"px"”，即350px。

其次，即便如此，我的第一张卡会触发第一个 div#drp 和第二个 div#drp 只要它的高度太大。这就像改变我的 div#drp 的高度不会扩展我的 DROPPABLE AREA。

所以，我的问题是：有没有办法在 "over" 事件中 "actualise" 可放置区域？我尝试更改 "over" 事件中的可投放事件，我还尝试更改 "over" 事件中的容差，但似乎没有任何效果。

有什么想法吗？

Answer 1

解决方案：

Droppable() 中没有任何东西使这成为可能。但是，可以更新 Draggable 选项中的 DROPPABLE AREA 位置。见下文：

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

我没想到 DROPPABLE 属性可以通过 DRAGGABLE 元素进行编辑。请注意，根据文档：

"If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance."

在多个设备上测试，它不会导致延迟或冻结，所以应该没问题。

请注意，如果 Draggable 元素位于 Droppable 元素下方（例如，如果您想执行与 Sortable()做，但使用 Draggable() & Droppable()).

问题已解决！

JQueryUI - droppable.touch 变化

JQueryUI - droppable.touch change

jquery-ui

jquery-ui-draggable

jquery-ui-droppable