（我的）拖放（javascript）不能正常工作與文本

我的JavaScript拖放引擎（仍在工作）不能在第二次拖動如果有文字涉及。除非點擊<p id="square" onmousedown="drag(event)">meep</p>，否則文字仍會正常運行，文字會下降，並且不是您點擊的位置，而是您剛剛點擊的位置（幾釐米）。另一方面，如果我使用沒有文字的<div>，它完美地工作。（我的）拖放（javascript）不能正常工作與文本

// 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>

來源

2011-02-24 Dbz

做你的<p>元素有邊距或填充？我猜這就是推動它不合適的地方

來源

2011-02-24 21:33:13

（我的）拖放（javascript）不能正常工作與文本

回答

相關問題