定位的类型真的影响了我的JavaScript [英] The type of positioning is really affecting my JavaScript
本文介绍了定位的类型真的影响了我的JavaScript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
.bound 的容器所限定。当我做拖动对象时，我还会发现是否有边界： 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;
}
我的循环工作，但是设置边界没有。
我希望这个html影响函数：
< div id = centerclass =bound>
< h1> Hello World！ < hr />< / h1>
< div id =boxclass =bound>
< p class =drag squareid =one>一个< / p>
< p class =drag squareid =two>两个< / p>
< / div>
< / div>
与此html一样多：
< div id =center> <！ - 区别在此 - >
< h1> Hello World！ < hr />< / h1>
< div id =boxclass =bound>
< p class =drag squareid =one>一个< / p>
< p class =drag squareid =two>两个< / p>
< / div>
< / div>
区别是 .bound 它有位置：相对设置。
这是CSS：
@charsetutf-8;
/ * CSS文件* /
* {
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;
背景：红色;
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;
不透明度：0.5;
}
如何使它成为位置：属性不会影响引擎的工作原理 - 所以任何位置都可以正常工作。绝对的，相对的，静态的？如何使我的 .drag 对象除了绝对之外还有任何定位？
我将发布下面的整个引擎（和一个jsfiddle链接），以防万一有用：
// JavaScript文件
var dragObj;
document.addEventListener（mousedown，down，false）;
函数down（event）{
if（〜event.target.className.search（/ drag /））{
dragObj = makeObj（event.target）;
dragObj.element.style.zIndex =100;
document.addEventListener（mousemove，freeMovement，false）;
}
}
函数freeMovement（event）{
if（typeof（dragObj.element.mouseup）==undefined）
document.addEventListener（mouseup，drop，false）;
//防止重复冗余添加相同的事件处理器
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;
}
函数drop（）{
dragObj.element.style.zIndex =1;
document.removeEventListener（mousemove，freeMovement，false）;
document.removeEventListener（mouseup，drop，false）;
// alert（DEBUG_DROP）;
}
函数makeBoundlessObj（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;
return obj;
}
函数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）{// StackOverflow上的`lwburk'捐赠
var curleft = curtop = 0;
if（obj.offsetParent）{
do {
curleft + = obj.offsetLeft;
curtop + = obj.offsetTop;
} while（obj = obj.offsetParent）;
return {x：curleft，y：curtop};
}
}
非常感谢您的阅读和帮助！ p>
解决方案
while（e = e.offsetParent）;
应该是
code> while（e == e.offsetParent）; //或者使用===
在C语言（如JavaScript）中，=表示将变量的值放在左侧变量的右侧。但是，==意思是两边的值是否匹配？
JavaScript只考虑了一些事情（如0，空字符串，null和undefined）虚假和一切都是真实的。所以，表达式 e = e.offsetParent 将始终返回true。
测试它，它适用于您发送的JSFiddle示例。
I'm currently making a drag-and-drop JavaScript engine. I'm currently making a "bounding" feature, so that the drag-object is bounded by a container with the class .bound. When I make the drag-object, I also find out if it has bounds:
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;
}
My loops work, however setting the bounds does not.
I would like this html to affect the function:
<div id="center" class="bound">
<h1>Hello World! <hr /></h1>
<div id="box" class="bound">
<p class="drag square" id="one"> One </p>
<p class="drag square" id="two"> Two </p>
</div>
</div>
As much as this html:
<div id="center"> <!-- Difference is here -->
<h1>Hello World! <hr /></h1>
<div id="box" class="bound">
<p class="drag square" id="one"> One </p>
<p class="drag square" id="two"> Two </p>
</div>
</div>
The difference is the .bound class, which has position: relative set.
Here is the 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;
}
How do I make it so the position: attribute doesn't affect how the engine works- So that any position will work. Absolute, Relative, Static, ect? How can I make my .drag objects have any kind of positioning besides absolute?
I will post the entire engine below (and a jsfiddle link) just in case it is useful:
// 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) {
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 };
}
}
Thank you so much for reading and helping!
解决方案
while (e = e.offsetParent);
Should be
while (e == e.offsetParent); //alternatively, use ===
In C-like languages (like JavaScript), = means "Put the value of the variable on the right to the variable on the left." However, == means "Do the values on both sides match?"
JavaScript considers anything but a few things (like 0, an empty string, null and undefined) as false and everything else as true. So, the expression e = e.offsetParent will always return true.
Tested it and it works on the JSFiddle example you sent.
这篇关于定位的类型真的影响了我的JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
