Entry
How do I implement drag and drop for positioned elements?
How do I implement drag and drop for positioned elements?
Jan 6th, 2001 07:09
Martin Honnen,
Here is an example that works with IE4+, NN4 and NN6. Selection of an
element starts with mousedown, dragging happens by moving the mouse
(with left mouse button pressed), drop happens by releasing the left
mouse button (mouseup).
<HTML>
<HEAD>
<TITLE>
drag and drop
</TITLE>
<STYLE>
.draggableElement {
position: absolute;
}
#d1 {
border: 2px solid green;
}
#d2 {
top: 0px; left: 300px;
}
</STYLE>
<SCRIPT>
var selectedElement;
function findDraggableElement (target) {
if (document.layers) {
if (target.constructor == Document) {
for (var l = 0; l < document.layers.length; l++)
if (target == document.layers[l].document)
return document.layers[l];
}
else if (target.constructor == Image) {
for (var l = 0; l < document.layers.length; l++)
for (var i = 0; i < document.layers[l].document.images.length;
i++)
if (target == document.layers[l].document.images[i])
return document.layers[l];
}
return null;
}
else if (document.all) {
do
if (target.className == 'draggableElement')
return target;
while ((target = target.parentElement));
return null;
}
else if (document.getElementById) {
do
if (target.className == 'draggableElement')
return target;
while ((target = target.parentNode));
return null;
}
}
function checkSelection (evt) {
if (document.layers) {
selectedElement = findDraggableElement (evt.target);
if (selectedElement) {
document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousemove = drag;
document.onmouseup = stopDrag;
}
}
else if (document.all) {
selectedElement = findDraggableElement (event.srcElement);
if (selectedElement) {
document.onmousemove = drag;
document.onmouseup = stopDrag;
}
}
else if (document.getElementById) {
selectedElement = findDraggableElement (evt.target);
if (selectedElement) {
document.onmousemove = drag;
document.onmouseup = stopDrag;
}
}
}
function drag (evt) {
if (document.layers) {
selectedElement.left = evt.pageX;
selectedElement.top = evt.pageY;
}
else if (document.all) {
selectedElement.style.posLeft = event.clientX;
selectedElement.style.posTop = event.clientY;
}
else if (document.getElementById) {
selectedElement.style.left = evt.clientX + 'px';
selectedElement.style.top = evt.clientY + 'px';
}
}
function stopDrag (evt) {
if (document.layers) {
document.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
document.onmousemove = null;
document.onmouseup = null;
selectedElement = null;
}
else if (document.all || document.getElementById) {
document.onmousemove = null;
document.onmouseup = null;
selectedElement = null;
}
}
if (document.layers)
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = checkSelection;
if (document.all)
document.onselectstart = document.ondragstart = function () {
return false;
};
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="d1" CLASS="draggableElement">
Kibology for all.
</DIV>
<BR>
non draggable image
<IMG SRC="kiboInside.gif">
<DIV ID="d2" CLASS="draggableElement">
<IMG SRC="kiboInside.gif">
</DIV>
</BODY>
</HTML>
Note that the NN4 example would need extending of the code for more
complex things (links, form elements) inside the layers as there is no
api provided in NN4 to navigate up the document hierarchy. You need to
script a search for links similar to the search for images done above
for example.
