Я пытаюсь использовать JavaScript, перетаскивая изображение вокруг экрана. Я уже написал script, который отлично работает на div с текстом, но когда я использую его на изображении, он работает очень прерывисто.
Я поставил свой код на jsfiddle, чтобы другие могли видеть, что я имею в виду. http://jsfiddle.net/laurence/YNMEX/
Если вы запустите его, вы обнаружите, что текстовый блок можно перетаскивать и удалять, но когда вы пытаетесь сделать то же самое с изображением, оно оставляет изображение позади. Это похоже на изображение, которое не может идти в ногу с движением мыши.
Я повторил код на jsfiddle ниже:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and drop</title>
<style type="text/css">
.dragme {
position:relative;
width: 270px;
height: 203px;
cursor: move;
}
#draggable {
background-color: #ccc;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
function startDrag(e) {
// determine event object
if (!e) {
var e = window.event;
}
// IE uses srcElement, others use target
var targ = e.target ? e.target : e.srcElement;
if (targ.className != 'dragme') {return};
// calculate event X, Y coordinates
offsetX = e.clientX;
offsetY = e.clientY;
// assign default values for top and left properties
if(!targ.style.left) { targ.style.left='0px'};
if (!targ.style.top) { targ.style.top='0px'};
// calculate integer values for top and left
// properties
coordX = parseInt(targ.style.left);
coordY = parseInt(targ.style.top);
drag = true;
// move div element
document.onmousemove=dragDiv;
}
function dragDiv(e) {
if (!drag) {return};
if (!e) { var e= window.event};
var targ=e.target?e.target:e.srcElement;
// move div element
targ.style.left=coordX+e.clientX-offsetX+'px';
targ.style.top=coordY+e.clientY-offsetY+'px';
return false;
}
function stopDrag() {
drag=false;
}
window.onload = function() {
document.onmousedown = startDrag;
document.onmouseup = stopDrag;
}
</script>
</head>
<body>
<div id="draggable" class="dragme">"Hello World!"</div>
<img src="flower.jpg" alt="drag-and-drop image script"
title="drag-and-drop image script" class="dragme">