Drag and drop til div
Jeg har et antal div boksen (dragItem) som skal kunne dragges og droppes på nogle andre div bokse (dropArea). Når et dragItem droppes på et dropArea skal dragItem rette sig ind så den ligger pænt på dropArea. Og en værdi overføres til dropArea fra dragItem.Nedenstående code virker næsten... :) Hvis jeg bruger billeder på både dragItem og dropArea så virker det, men hvis jeg fjerner image fra dragItem så rettes dragItem først ind hvis jeg flytter muse, mens hvis jeg fjerner image fra dropArea så rettes dragItem slet ikke ind.
Kort sagt så ønsker jeg at komme af med billederne
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Drag-n-Drop</title>
<style type="text/css">
div.dropArea {
position:relative; width:100px; height:100px; z-index:+1;
border:1px solid black; padding:0px; margin:10px; text-align:center;
background-image: url('any.gif');
}
</style>
<script type="text/javascript" language="JavaScript">
currDiv = null;
saveDiv = null;
saveIdx = null;
mouseLeft = null;
mouseTop = null;
function setDrag(div, e) {
if (window.Event) {
if (e.which != 1) return true;
mouseLeft = e.pageX;
mouseTop = e.pageY;
currDiv = div;
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = function(event) { return moveDrag(event); };
} else {
if (e.button != 1) return true;
mouseLeft = e.clientX;
mouseTop = e.clientY;
currDiv = div;
document.onmousemove = function() { return moveDrag(event); };
}
return true;
}
function moveDrag(e) {
if (currDiv) {
if (window.Event) {
currDiv.moveBy((e.pageX - mouseLeft),(e.pageY - mouseTop));
mouseLeft = e.pageX;
mouseTop = e.pageY;
} else {
currDiv.style.posLeft = currDiv.style.posLeft + (e.clientX - mouseLeft);
currDiv.style.posTop = currDiv.style.posTop + (e.clientY - mouseTop);
mouseLeft = e.clientX;
mouseTop = e.clientY;
}
return false;
}
return true;
}
function endDrag(e) {
if (window.Event) {
if (e.which != 1) return true;
document.releaseEvents(Event.MOUSEMOVE);
} else {
if (e.button != 1) return true;
}
if (currDiv == null) return true;
document.onmousemove = null;
saveDiv = currDiv;
saveIdx = currDiv.style.zIndex
currDiv.style.zIndex = 0;
currDiv = null;
mouseLeft = null;
mouseTop = null;
return true;
}
function getDrop(div, e) {
var x, y;
if (saveDiv) {
div.myvalue = saveDiv.myvalue;
saveDiv.style.zIndex = saveIdx;
saveDiv.style.left = getRealLeft(div) + 5;
saveDiv.style.top = getRealTop(div) + 5;
saveDiv = null;
}
return false;
}
function resetMove() {
if (saveDiv) {
saveDiv.style.zIndex = saveIdx;
saveDiv = null;
}
return true;
}
function getRealLeft(el) {
xPos = el.offsetLeft;
tempEl = el.offsetParent;
while (tempEl != null) {
xPos += tempEl.offsetLeft;
tempEl = tempEl.offsetParent;
}
return xPos;
}
function getRealTop(el) {
yPos = el.offsetTop;
tempEl = el.offsetParent;
while (tempEl != null) {
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
return yPos;
}
</script>
</head>
<body>
<div id="drop1" myvalue="" class="dropArea" title="Drop Area 1" onClick="alert(this.myvalue);" onMouseMove="return getDrop(this, event);">One</div>
<div id="drop2" myvalue="" class="dropArea" title="Drop Area 2" onClick="alert(this.myvalue);" onMouseMove="return getDrop(this, event);">Two</div>
<div id="drop3" myvalue="" class="dropArea" title="Drop Area 3" onClick="alert(this.myvalue);" onMouseMove="return getDrop(this, event);">Three</div>
<div id="drop4" myvalue="" class="dropArea" title="Drop Area 4" onClick="alert(this.myvalue);" onMouseMove="return getDrop(this, event);">Four</div>
<div id="item1" myvalue="some value1" style="position:absolute; left:250px; top:20px; z-index:+2; cursor:pointer;"
onMouseDown="return setDrag(this, event);" onMouseUp="return endDrag(event);" onMouseMove="return resetMove();">
<span>Box 1</span>
</div>
<div id="item2" myvalue="some value2" style="position:absolute; left:250px; top:70px; width:30px; height:33px; z-index:+3; cursor:pointer;"
onMouseDown="return setDrag(this, event);" onMouseUp="return endDrag(event);" onMouseMove="return resetMove();">
<img src="any.gif" width="30" height="33" border="0">
</div>
<div id="item3" myvalue="some value3" style="position:absolute; left:250px; top:120px; width:31px; height:31px; z-index:+4; cursor:pointer;"
onMouseDown="return setDrag(this, event);" onMouseUp="return endDrag(event);" onMouseMove="return resetMove();">
<img src="any.gif" border="0" width="31" height="31">
</div>
<div id="item4" myvalue="some value4" style="position:absolute; left:250px; top:170px; width:33px; height:33px; z-index:+5; cursor:pointer;"
onMouseDown="return setDrag(this, event);" onMouseUp="return endDrag(event);" onMouseMove="return resetMove();">
<img src="any.gif" width="33" height="33" border="0">
</div>
</body>
</html>
