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'

});

可放置对象的公差有四个选项：

“ fit-可拖动元素完全覆盖了可放置元素。

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

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

touch –可拖动与可放置对象重叠任意数量的触摸。”

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

jQuery可排序与动态DIV

1 个答案: