|
Mit diesem JavaScript lassen sich Texte per Drag&Drop ziehen.
Autor: unbekannt
zur Demo
<style>
.draggableElement {
position: absolute;
}
#d1 {
border: 2px solid green;
}
#d2 {
top: 0px; left: 300px;
}
</style>
<script>
var selectedElement;
<!--gefunden auf http://www.scriptwelt.org -->
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>
<div id="d1" class="draggableElement">
zieh mich durch die Gegend www.scriptwelt.org
</div>
<br>
<div id="d2" class="draggableElement">
zieh mich auch durch die Gegend www.scriptwelt.org
</div>
|