Question

如果涉及到文本，我的javascript拖放引擎（仍在使用它）对第二次拖动不起作用。它仍然表现正常，除非您单击<p id="square" onmousedown="drag(event)">meep</p>，文本会从您不是单击的位置下降并跟随您，而是从您单击的下方（几厘米）开始跟随。另一方面，如果我使用没有文字的<div>，它就会完美无缺。

// JavaScript Document

var posX;
var posY;
var element;

function drag(event) {
    element = document.getElementById("square");
    posX = event.clientX -parseInt(element.offsetLeft);
    posY = event.clientY -parseInt(element.offsetTop);
    document.addEventListener("mousemove", move, false);
}

function move(event) {

    if (typeof(document.getElementById("square").mouseup) == "undefined")
        element.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() {
    document.removeEventListener("mousemove", move, false);
    element.removeEventListener("mouseup", drop, false);
}

html是：

<div id="square" onmousedown="drag(event)"></div>

或

<p id="square" onmousedown="drag(event)">meep</p>

和一些节省时间的CSS：

#square {
    position: relative;
    width: 100px;
    height: 100px;
    background: red;
}

谢谢大家的答案和时间！

编辑：<div>似乎与其中的文字完美配合，但不是<p>

Answer 1

您的<p>元素是否有边距或填充？我猜这是推动它不合适的原因

（我的）拖放（javascript）无法正常使用文本

1 个答案: