我目前正在制作一个拖放式 javascript 引擎。我想让一个类 (.drag
) 成为最低限度的元素,该元素必须是“可拖动的”。目前我在 css 中的 .drag
类有一些额外的东西,我想把它分成两个类。但是,当我拆分类时,我希望拖动的对象不再是“可拖动的”。
目前:
.drag {
position: absolute;
width: 100px;
height: 100px;
background: red;
cursor:move;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
我想有两个类:
.drag {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.square {
width: 100px;
height: 100px;
background: red;
cursor:move;
}
HTML 更改自:
<p class="drag">Thing One</p>
<p class="drag">Thing Two</p>
收件人:
<p class="drag square">Thing One</p>
<p class="drag square">Thing Two</p>
这是javascript:
// JavaScript Document
var posX;
var posY;
var element;
var currentPos;
document.addEventListener("mousedown", drag, false);
function drag(event) {
if(event.target.className == "drag") {
element = event.target;
element.style.zIndex="100";
currentPos = findPos(element);
posX = event.clientX -currentPos.x; //-parseInt(element.offsetLeft);
posY = event.clientY -currentPos.y; //-parseInt(element.offsetTop);
document.addEventListener("mousemove", move, false);
}
}
function move(event) {
if (typeof(element.mouseup) == "undefined")
document.addEventListener("mouseup", drop, false);
//Prevents redundantly adding the same event handler repeatedly
element.style.left = event.clientX - posX + "px";
element.style.top = event.clientY - posY + "px";
}
function drop() {
element.style.zIndex="1";
document.removeEventListener("mousemove", move, false);
document.removeEventListener("mouseup", drop, false);
//alert("DEBUG_DROP");
}
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 };
}
}
为什么我拆分类的时候元素不会拖拽?我该如何解决?
非常感谢您的阅读和帮助!非常感谢。
最佳答案
您的条件有 event.target.className == "drag"
但这不再是 true,因为现在 == "drag square"
。你想要的是这样的:
event.target.className.search(/\bdrag\b/) > -1
为您的条件。
关于javascript - 当我将一个类分成两个类时,我的 javascript 中断了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5123309/