（我的）拖放（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>元素是否有邊距或填充？ 我猜這是推動它不合適的原因