В настоящее время я делаю движок "Drag and Drop" в javascript. Когда я выбираю элемент, чтобы переместить его, курсор меняется с cursor: move (который я установил в CSS) на cursor: text, что мне не нужно. Он также может выбирать (выделять) текст из других элементов, в то время как я перемещаю объект перетаскивания, который (опять же) мне не нужен. Как мне предотвратить возникновение этих проблем?
// JavaScript Document
var posX;
var posY;
var element;
var currentPos;
document.addEventListener("mousedown", drag, false);
function drag(event) {
if(event.target.className == "square") {
element = event.target;
currentPos = findPos(element);
posX = event.clientX -currentPos.x; //-parseInt(element.offsetLeft);
posY = event.clientY -currentPos.y; //-parseInt(element.offsetTop);
document.addEventListener("mousemove", move, false);
}
}
function move(event) {
if (typeof(element.mouseup) == "undefined")
document.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);
document.removeEventListener("mouseup", drop, false);
//alert("DEBUG_DROP");
}
function findPos(obj) { // Donated by `lwburk` on StackOverflow
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
}
CSS:
.square {
position: absolute;
width: 100px;
height: 100px;
background: red;
cursor:move;
}
p {
padding: 0px;
margin: 0px;
outline-style: dotted;
outline-color: #000;
outline-width: 1px;
}
HTML:
<body>
<p class="square">Thing One</p>
<p class="square">Thing Two</p>
</body>
Большое спасибо за чтение и даже больше за помощь! Это очень много значит, особенно потому, что я только начинаю изучать язык.