jquery-ui - 带有动态 DIV 的 JQuery 可排序
问题描述
我有一个实现 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>
这是我创建的一个小提琴,虽然它与我的本地源代码不太一样:
解决方案
虽然不理想,但只需将 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
推荐阅读
- php - laravel 4.1.28 命令注册不起作用
- php - 如何通过为所有条目添加自定义名称来更新所有记录
- mysql - 在 php my admin 中添加日期字段
- json - 离子 Json 嵌套
- linux - MacOS /dev/null 权限被拒绝
- angular - 角度 4 选择框和禁用按钮
- image - 图片不在 Flatlist 中渲染,但在打开 modal 时出现
- amazon-web-services - 创建多个 AWS EBS 卷并使用 Terraform 将其附加到实例
- c - 做'&&'和'||' 位于运算符优先级的同一行还是在不同的行?
- node.js - 如何将 Windows 证书存储中的证书添加到节点发布请求