带有动态 DIV 的 JQuery 可排序

Question

我有一个实现 jQuery 可拖动、可放置和可排序的页面。它包含 div 行、一个“添加行”按钮和一个图像图标，该图标可以拖动到任何 div 行上，从而显示一个模式窗口，允许将图像放置到该行上。一切都很好......除了：

我使用 jQuery sortable 来重新排列行。当拖动发生时（约束到 y 轴），被拖动的 div 被拖动并放置在它之后的 div 是灰色的。这很好用，除非 DIV 中有图像，导致拖动的 DIV 的高度比空 div 高得多。它似乎没有正确跟踪，正如行如何变成灰色和从灰色显示的那样。

这里是一些 JQuery 代码：

$(".dropzone").droppable({
    over: function(event,ui)
    {
        var ElementOver = $(event.target);
        var DraggedElement = $(ui.draggable);
        var IDofDraggedElement = DraggedElement.attr("id");             

        ElementOver.css("background-color","lightgray");
    },
    out: function(event,ui)
    {
        var ElementOver = $(event.target);
        ElementOver.css("background-color","");
    },
    drop: function(event,ui)
    {
        DropObject(event,ui); //This handles Ajax activity  
        var ElementOver = $(event.target);
        ElementOver.css("background-color","");
    }
});             


$("#lines").sortable({
    handle: '.iconmove',
    axis: 'y',
    tolerance: 'pointer',
    helper: 'clone'         
});

这是我的 HTML 示例：

<div id="linecontainer" class="w3-card-4 w3-padding">
    <div id="lines">
        <cfoutput query="qFormLines" group="formlineid">
            <div  class="w3-row w3-padding" style="width:80%" id="line#formlineid#">
                <div class="w3-col w3-center  l1 m1 s1">
                    <img id="moveicon#formlineid#" class="iconmove" src="_images/updown24.png" title="Move Line" >
                </div>
                <div class="dropzone w3-padding w3-col w3-border l11 m11 s11" id="zone#formlineid#"   >
                    <cfoutput>
                        <cfif imagefile NEQ "">
                            <img id="formitem#formitemid#" class="w3-border" src="_images/#imagefile#"   >
                        </cfif>
                    </cfoutput>
                </div>              
            </div>
        </cfoutput>
    </div>
</div>

这是我创建的一个小提琴，虽然它与我的本地源代码不太一样：

Fiddle

Answer 1

虽然不理想，但只需将 JQuery Droppable 方法的选项 - Tolerance 从其默认的“相交”更改为“触摸”。只要通过任意量的触摸，可拖动对象与可放置对象重叠时，它都会让您看到效果：

$(".dropzone").droppable({
  // Change the tolerance to 'touch'
  tolerance: "touch",
  over: function(event, ui) {
    var ElementOver = $(event.target);
    var DraggedElement = $(ui.draggable);
    var IDofDraggedElement = DraggedElement.attr("id");

    console.log(IDofDraggedElement);

    //if (IDofDraggedElement.indexOf("imageicon") == 0) //MOVING A LINE
    ElementOver.css("background-color", "lightgray");
  },
  out: function(event, ui) {
    var ElementOver = $(event.target);

    ElementOver.css("background-color", "");
  },
  drop: function(event, ui) {
    var ElementOver = $(event.target);

    ElementOver.css("background-color", "");
  }
});


$("#lines").sortable({
  handle: '.iconmove',
  axis: 'y',
  tolerance: 'pointer',
  helper: 'clone'

});

droppable 的容差有四个选项：

"fit - Draggable 完全覆盖了可放置元素。

intersect - Draggable 在两个方向上与可放置元素至少重叠 50%。

pointer - 鼠标指针与可放置元素重叠。

touch - Draggable 与 droppable 的任意触摸重叠。”

引用https://www.tutorialspoint.com/jqueryui/jqueryui_droppable.htm