мой движок 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>