我正在制作一个拖放式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>
我试图多次执行适当的功能。我将给出一个我无法完成的工作,并列出原因:
哦,在创建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;
}
设置边界框的正确数学是什么,为什么?我可以摆脱
position: relative
类中的.bound
吗?我可以使.drag
类不是position: absolute
吗?我知道所有这些事情可能会极大地影响边界函数的编写方式。如果我让在让.drag
类或.bound
类不需要某种类型的position
之间进行选择,则可以选择将.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类中的relative吗?对。
我可以使.drag类不处于绝对位置吗?对。您只想将自己的职位更改为相对职位,并将计算结果考虑在内即可。例如,您的最小界限现在为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/