JQueryUI - droppable.touch 更改答案

【问题标题】：JQueryUI - droppable.touch changeJQueryUI - droppable.touch 更改
【发布时间】：2018-10-29 11:30:39
【问题描述】：

我目前正在尝试制作一个扩展的可放置区域，但我遇到了一些问题。这是代码（下面的解释）：

$('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#滴滴。正如你应该明白的，每个 div#drp 都是一个 DROPPABLE AREA（每个 div#card 都可以放在每个 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>

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

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

其次，即使这样，我的第一张卡片只要高度太大，就会触发第一个 div#drp 和第二个 div#drp。就像更改 div#drp 的高度不会扩展我的 DROPPABLE AREA 一样。

所以，我的问题是：有没有办法在“over”事件中“实现”DROPPABLE AREA？我尝试在“over”事件中更改 droppable 事件，我还尝试在“over”事件中更改容差，但似乎没有任何效果。

有什么想法吗？

【问题讨论】：

标签： jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

解决方案：

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

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

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

“如果设置为 true，则每次鼠标移动都会计算所有可放置位置。注意：这可以解决高度动态页面上的问题，但会显着降低性能。”

在多台设备上测试，不会导致卡顿或卡顿，应该没问题。

请注意，如果 Draggable 元素位于 Droppable 元素下方，则此配置值还将修复由 Droppable.over 上添加的任何元素引起的边距（例如，如果您想要执行与 Sortable() 相同的操作，但使用Draggable() & Droppable())。

问题解决了！

【讨论】：