我正在制作拖放 JavaScript 引擎。我学习了如何将边界框设置为父元素。但是,现在我希望将边界框设置为任何父级的任何父级,或者作为整个页面(无边界)。
现在我的 Javascript 引擎看起来像:
// JavaScript Document
var dragObj;
document.addEventListener("mousedown", down, false);
function down(event) {
if(~event.target.className.search(/drag/)) {
dragObj = makeObj(event.target);
dragObj.element.style.zIndex="100";
document.addEventListener("mousemove", freeMovement, false);
}
}
function freeMovement(event) {
if (typeof(dragObj.element.mouseup) == "undefined")
document.addEventListener("mouseup", drop, false);
//Prevents redundantly adding the same event handler repeatedly
dragObj.element.style.left = Math.max(0, Math.min(event.clientX - dragObj.posX, dragObj.boundX)) + "px";
dragObj.element.style.top = Math.max(0, Math.min(event.clientY - dragObj.posY, dragObj.boundY)) + "px";
}
function drop() {
dragObj.element.style.zIndex="1";
document.removeEventListener("mousemove", freeMovement, false);
document.removeEventListener("mouseup", drop, false);
//alert("DEBUG_DROP");
}
function makeBoundlessObj(e) {
var obj = new Object();
obj.element = e;
obj.boundX = e.parentNode.offsetWidth - e.offsetWidth;
obj.boundY = e.parentNode.offsetHeight - e.offsetHeight;
obj.posX = event.clientX - e.offsetLeft;
obj.posY = event.clientY - e.offsetTop;
return obj;
}
function makeObj(e) {
obj = new Object();
obj.element = e;
obj.boundX = e.parentNode.offsetWidth - e.offsetWidth;
obj.boundY = e.parentNode.offsetHeight - e.offsetHeight;
obj.posX = event.clientX - e.offsetLeft;
obj.posY = event.clientY - e.offsetTop;
var curleft = curtop = 0;
if (e.offsetParent) {
do {
curleft += e.offsetLeft;
curtop += e.offsetTop;
//alert(e.id + ":" + e.innerHTML);
if(~e.className.search(/bound/)) {
obj.boundX = curleft - obj.element.offsetLeft;
obj.boundY = curtop - obj.element.offsetTop;
return obj;
}
} while (e = e.offsetParent);
}
return obj;
}
function findPos(obj) { // Donated by `lwburk` on StackOverflow
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
}
我的 CSS 如下:
@charset "utf-8";
/* CSS Document */
* {
padding: 0px;
margin: 0px;
}
.drag {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bound {
position: relative;
}
.square {
width: 100px;
height: 100px;
background: red;
cursor:move;
}
#center {
width: 500px;
height: 300px;
margin: auto;
margin-top: 50px;
background-color:#ccc;
text-align: center;
border-radius: 25px;
-moz-border-radius: 25px;
}
#box {
background-color: #FF3;
height: 278px;
border-radius: 0 0 25px 25px;
-moz-border-radius: 0 0 25px 25px;
opacity: 0.5;
}
而且我的 HTML 非常干净:
<div id="center">
<h1>Hello World! <hr /></h1>
<div id="box" class="bound">
<p class="drag square"> One </p>
<p class="drag square"> Two </p>
</div>
</div>
我已经多次尝试实现正确的功能。我会给出一个我做的不起作用的,我会列出原因:
如果没有bounds,我设置默认bounds为父元素(因为我不知道如何设置bounds为整个页面)
如果父元素之一是绑定(bind),那么我没有正确设置绑定(bind)坐标(同样,我不知道如何设置)
哦,我在创建 drag_object 时设置了边界。
JavaScript 创建函数:
function makeObj(e) {
var obj = new Object();
obj.element = e;
obj.boundX = e.parentNode.offsetWidth - e.offsetWidth;
obj.boundY = e.parentNode.offsetHeight - e.offsetHeight;
obj.posX = event.clientX - e.offsetLeft;
obj.posY = event.clientY - e.offsetTop;
var curleft = curtop = 0;
if (e.offsetParent) {
do {
curleft += e.offsetLeft;
curtop += e.offsetTop;
//alert(e.id + ":" + e.innerHTML);
if(~e.className.search(/bound/)) {
obj.boundX = curleft - obj.element.offsetLeft;
obj.boundY = curtop - obj.element.offsetTop;
return obj;
}
} while (e = e.offsetParent);
}
return obj;
}
设置边界框的正确数学是什么?为什么?我可以去掉 .bound
类中的 position: relative
吗?我可以让 .drag
类不是 position: absolute
吗?我知道所有这些事情可能会极大地影响边界函数的编写方式。如果我必须在.drag
类或.bound
类之间做出选择,则不需要某种类型的位置
,我会选择将 .bound
类设置为任何类型的定位。
感谢大家的阅读和帮助!它对我意义重大;我是一名全日制(寄宿)高中生,空闲时间很少 =/
编辑:
我应该指出,我已经进入学习 Javascript 的第十天——或者说第十五个小时,这取决于你如何看待它,我想在开始使用 jQuery 等库之前学习这门语言。这个引擎是我为了知识和学习语言而为自己做的学术练习 =]
最佳答案
我注意到的第一件事是您没有最小边界。您将需要它来强制执行上限和下限。
设置边界框的正确数学是什么?为什么?
首先,dragObj
需要考虑两个边界(适用于 position: absolute
):
// parentNode is our bounding box
// the minimum boundary is based on the top left corner of our container
obj.minBoundX = e.parentNode.offsetLeft;
obj.minBoundY = e.parentNode.offsetTop;
// the maximum is the bottom right corner of the container
// or.. the top left (x,y) + the height and width (h,y) - the size of the square
obj.maxBoundX = obj.minBoundX + e.parentNode.offsetWidth - e.offsetWidth;
obj.maxBoundY = obj.minBoundY + e.parentNode.offsetHeight - e.offsetHeight;
强制边界是对 freeMovement
的简单更新:
dragObj.element.style.left = Math.max(dragObj.minBoundX, Math.min(event.clientX - dragObj.posX, dragObj.maxBoundX)) + "px";
dragObj.element.style.top = Math.max(dragObj.minBoundY, Math.min(event.clientY - dragObj.posY, dragObj.maxBoundY)) + "px";
我可以去掉 .bound 类中的 position: relative 吗? 可以。
我可以让 .drag class 不是 position: absolute 吗? 是的。您只想将您的职位更改为相对的,并更改您的计算以说明这一点。例如,您的最小界限现在将为 0。
// parentNode is our bounding box
// the minimum boundary is based on the top left corner of our container
obj.minBoundX = 0;
obj.minBoundY = 0;
这是 position:absolute
版本的 JSFiddle:http://jsfiddle.net/feWcQ/ (适用于 Firefox 4)。我还添加了两个显示边界的小方框。希望我的回答对您有所帮助!
关于javascript - 如何在 javascript 中为可拖动对象设置 "bounding"区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5130810/