jquery-ui - Draggable UI - 如何定义不可拖动区域?
问题描述
我正在研究可拖动的功能。在那我创建了一个区域(见附件截图),我必须在其中拖动图像。但是还有一个不可拖动的区域,我必须在其中禁用可拖动功能。
+-------+
| |
| D |
| |
| +---+
| | |
| | U |
| | |
+---+---+
D = 可拖动,U = 不可拖动
如果有人可以在这个问题上提供帮助,那就太好了。您的帮助可能会不胜感激。
解决方案
可拖动容器使用盒子模型来识别可拖动项目的边界。
包含类型:选择器或元素或字符串或数组,默认值:false
将拖动限制在指定元素或区域的范围内。支持多种类型:
- 选择器:可拖动元素将包含在选择器找到的第一个元素的边界框内。如果未找到任何元素,则不会设置包含。
- 元素:可拖动元素将包含在该元素的边界框内。
- 字符串:可能的值:
"parent"
,"document"
,"window"
.- 数组:以 形式定义边界框的数组
[ x1, y1, x2, y2 ]
。
参考:http ://api.jqueryui.com/draggable/
因此,这意味着您需要创建复杂的框或在drag
回调中构建碰撞检测。当drag
被触发时,它被传递一个event
和ui
对象。ui.position
可以操纵:
{ top, left }
帮助器作为对象的当前 CSS 位置。可以更改这些值以修改元素的放置位置。这对于自定义包含、捕捉等很有用。
这可能很困难,所以如果这是一个起步项目或小型项目,请考虑使用碰撞插件:jQuery Dragging With Collision Detection
考虑以下原始示例。
$(function() {
function log(obj) {
var str = "T: " + obj.top + " L:, " + obj.left + ", R: " + obj.right + ", B: " + obj.bottom;
$("#log").html(str);
}
function getObjectPos(obj) {
var oPos = obj.position();
oPos.right = oPos.left + obj.width();
oPos.bottom = oPos.top + obj.height();
return oPos;
}
function collision(a, b) {
var col = false;
var side;
var r1 = getObjectPos(a);
var r2 = getObjectPos(b);
/*
https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y
*/
if (r1.left < r2.right && r1.right > r2.left && r1.top < r2.bottom && r1.bottom > r2.top) {
col = true;
}
return {
col: col,
right: r1.right > r2.left,
left: r1.left > r2.right,
bottom: r1.bottom > r2.bottom,
top: r1.top > r2.top
};
}
$("#draggable").draggable({
containment: "#containment-wrapper",
start: function(e, ui) {
ui.helper.data("prev-pos", getObjectPos(ui.helper));
},
drag: function(e, ui) {
var oPrevPos = ui.helper.data("prev-pos");
var oPos = getObjectPos(ui.helper);
console.log(oPrevPos, oPos);
log(oPos);
$("#containment-wrapper .no-drag").each(function(ind, el) {
var c = collision(ui.helper, $(el));
var col = c.col;
var side;
if (col) {
switch (true) {
case c.top:
side = "top";
break;
case c.left:
side = "left";
break;
case c.bottom:
side = "bottom";
break;
case c.right:
side = "right";
break;
}
console.log("Collision: " + col, side, c);
switch (side) {
case "left":
case "right":
ui.position.left = oPrevPos.left
break;
case "top":
case "bottom":
ui.position.top = oPrevPos.top
break;
}
} else {
console.log("Collision: " + c.col, c);
ui.helper.data("prev-pos", oPos);
}
});
}
});
});
.draggable {
width: 100px;
height: 100px;
float: left;
margin: 0;
padding: 0;
background: #CCC;
}
#containment-wrapper {
width: 400px;
height: 250px;
border: 2px solid #ccc;
padding: 10px;
position: relative;
}
#containment-wrapper .no-drag {
width: 100px;
height: 100px;
border: 2px solid #ccc;
top: 168px;
left: 318px;
position: absolute;
}
.output {
margin-top: -2em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="containment-wrapper">
<div id="draggable" class="draggable">
</div>
<div class="no-drag">
</div>
</div>
<div id="log" class="output"></div>
这是一个使用一些 2D 碰撞检测的非常基本的示例。这不是很好,可以使用改进,但你可以看到从哪里开始。
希望这可以帮助。
推荐阅读
- javascript - Firestore 云功能尝试使用批处理对 Writes 和 Missing return promise 进行分组
- javascript - 使用 fetch(),从非 HTTP OK 状态码中读取响应体并捕获异常
- fipy - 使用 Mesh2D 构造函数重新创建 fipy Grid2D
- r - 用 dplyr 总结 - 一个变量总是在底部
- amp-html - ¿ 我可以在 amp 网站上添加一个号召性用语按钮来引导非 amp 调查吗?
- html - 设置表格突出显示的列文本颜色
- r - R:使用向量点和for循环从序列生成序列
- php - PHP 搜索特定值的多维数组
- ios - 以编程方式居中多个 (4) 视图
- python - AttributeError:类型对象“可调用”没有属性“_abc_registry”