test1234bot
Programmer
- Oct 11, 2007
- 1
Hi everyone, im having some trouble with drag and drop in javascript.
(sorry about the ads)
I have so far enabled objects to be dragged around the screen freely, but there are some adjustments I would like to make.
1) Only images 1 to 3 on the left side of the screen can be moved.
&
2) The images on the left can only be dropped on the "drag here" images on the right, anywhere else they are dropped they need to return to their original position.
Any links to examples of how I can achieve this would be greatly apprciated.
Here is my code (taken from ):
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
N = (document.all) ? 0 : 1;
var ob;
function MD(e) {
if (N) {
ob = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
}
else {
ob = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
}
function MM(e) {
if (ob) {
if (N) {
ob.moveTo((e.pageX-X), (e.pageY-Y));
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>
</HEAD>
<BODY>
<div id="img1" style="position:absolute;left:50;top:400;">
<img src=images/image1.jpg name="image1">
</div>
<div id="img2" style="position:absolute;left:50;top:250;">
<img src=images/image2.jpg name="image2">
</div>
<div id="img3" style="position:absolute;left:50;top:100;">
<img src=images/image3.jpg name="h">
</div>
<div id="img21" style="position:absolute;right:50;top:400;">
<img src=images/image21.jpg name="image21">
</div>
<div id="img22" style="position:absolute;right:50;top:250;">
<img src=images/image22.jpg name="image22">
</div>
<div id="img23" style="position:absolute;right:50;top:100;">
<img src=images/image23.jpg name="image23">
</div>
<div id="draghere1" style="position:absolute;right:250;top:400;">
<img src=images/draghere.jpg name="draghere">
</div>
<div id="draghere2" style="position:absolute;right:250;top:250;">
<img src=images/draghere.jpg name="draghere">
</div>
<div id="draghere3" style="position:absolute;right:250;top:100;">
<img src=images/draghere.jpg name="draghere">
</div>
Drag the images on the left to match the images on the right
(sorry about the ads)
I have so far enabled objects to be dragged around the screen freely, but there are some adjustments I would like to make.
1) Only images 1 to 3 on the left side of the screen can be moved.
&
2) The images on the left can only be dropped on the "drag here" images on the right, anywhere else they are dropped they need to return to their original position.
Any links to examples of how I can achieve this would be greatly apprciated.
Here is my code (taken from ):
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
N = (document.all) ? 0 : 1;
var ob;
function MD(e) {
if (N) {
ob = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
}
else {
ob = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
}
function MM(e) {
if (ob) {
if (N) {
ob.moveTo((e.pageX-X), (e.pageY-Y));
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>
</HEAD>
<BODY>
<div id="img1" style="position:absolute;left:50;top:400;">
<img src=images/image1.jpg name="image1">
</div>
<div id="img2" style="position:absolute;left:50;top:250;">
<img src=images/image2.jpg name="image2">
</div>
<div id="img3" style="position:absolute;left:50;top:100;">
<img src=images/image3.jpg name="h">
</div>
<div id="img21" style="position:absolute;right:50;top:400;">
<img src=images/image21.jpg name="image21">
</div>
<div id="img22" style="position:absolute;right:50;top:250;">
<img src=images/image22.jpg name="image22">
</div>
<div id="img23" style="position:absolute;right:50;top:100;">
<img src=images/image23.jpg name="image23">
</div>
<div id="draghere1" style="position:absolute;right:250;top:400;">
<img src=images/draghere.jpg name="draghere">
</div>
<div id="draghere2" style="position:absolute;right:250;top:250;">
<img src=images/draghere.jpg name="draghere">
</div>
<div id="draghere3" style="position:absolute;right:250;top:100;">
<img src=images/draghere.jpg name="draghere">
</div>
Drag the images on the left to match the images on the right
