Javascript  »  DHTML  »  Drag & Drop

zur Übersicht

Kategorie	DHTML
Bezeichnung	Drag & Drop
ScriptDemo	Neues Fenster für Demo öffnen
Statistik	27009 Aufrufe davon 1x gestern
Dieses Script funktioniert mit allen grossen Browsern (NN4, NN6, IE4+ und Opera5+)
Javascript-Quellcode  (einfach markieren, kopieren und lokal abspeichern) <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> <div id="d1" class="draggableElement"> jsunity. immwer wieder neu, immer wieder gut. </div> <br> <div id="d2" class="draggableElement"> jsunity. immwer wieder neu, immer wieder gut. die 2. </div>

Kommentare zu Drag & Drop

0 Kommentar(e) vorhanden / Anzeige der neuesten 5

Noch keine Kommentare zu diesem Javascript vorhanden.


Alle Kommentare anzeigen   -   Kommentar hinzufügen