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

Question

如果涉及到文本，我的javascript拖放引擎（仍在使用它）对第二次拖动不起作用。 它仍然表现正常，除非你单击<p id="square" onmousedown="drag(event)">meep</p> ，文本就会从你所点击的位置下拉并跟随你 - 但是从下面（a）几厘米）你点击的地方。 另一方面，如果我使用没有文本的<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>元素是否有边距或填充？ 我猜这是推动它不合适的原因