Question

我目前正在制作一个拖放式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 };
    }
}

为什么在拆分类时元素不会拖动？我该如何解决？

非常感谢您的阅读和帮助！我非常感激。

Answer 1

您的条件有event.target.className == "drag"但现在不再是== "drag square"。你想要的是：

event.target.className.search(/\bdrag\b/) > -1

为您的条件。

Answer 2

我怀疑行if(event.target.className == "drag") {现在会拉回“拖动方块” - 你应该在空格上拆分className并检查是否有任何类是“拖动”。

Answer 3

在你的拖拽功能中你说：

event.target.className == "drag"

问题可能是，一旦你在元素上有多个类，className不再等于“拖动”，但现在是“拖动方块”类的超集。您可以尝试对className进行搜索，以查找其中一个类是“拖动”而不是仅拖动。

当我将一个类分成两个类时，我的javascript就破坏了

3 个答案: