Hallo!
Ich würde gerne meine Websiten um die Fähigkeit von Drag & Drop erweitern, allerdings ohne irgendein überdimmensioniertes Framework einzubinden etc. ...
Also ich hab das ganze bis jetzt so:
Wie man sieht möchte ich einfach nur Div's mit Text darin hin- und herschieben können.
Das ganze funktioniert auch FAST!
Wenn man das ganze ausführt merkt man das man den Text verschieben kann aber manchmal "hakt" das ganze etwas oder aber wenn man den Text in eine der beiden Divs geschoben hat dann kann man es kaum noch in das andere zurückschieben.
Verstehe nicht so recht warum dies so ist, scheint mir alles richtig mehr oder weniger, aber nunja...
Krieg ich das so "billig" hin wie ich mir das da gedacht habe oder muss ich irgendwas mit Ajax etc. machen (irgendwie kommt bei google bei drag & drop auch immer Ajax, hmm...).
Wäre wirklich super wenn ihr mir da helft, sitz irgendwie (ok mit ziemlich vielen unterbrechungen) seit gestern dran...
Ich würde gerne meine Websiten um die Fähigkeit von Drag & Drop erweitern, allerdings ohne irgendein überdimmensioniertes Framework einzubinden etc. ...
Also ich hab das ganze bis jetzt so:
Code:
<html>
<head>
<title>Drag-and-Drop</title>
<script type="text/javascript">
<!-- gueltig fuer Netscape ab Version 6, Mozilla, Internet Explorer ab Version 4
//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;
var dropzone;
// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;
// Mausposition
var posx = 0;
var posy = 0;
function draginit() {
// Initialisierung der Überwachung der Events
document.onmousemove = drag;
document.onmouseup = dragstop;
}
function dragstart(element) {
//Wird aufgerufen, wenn ein Objekt bewegt werden soll.
dragobjekt = element;
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
dragobjekt.style.position = "absolute";
}
function dragstop() {
//Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll. Nur wenn Objekt über Dropzone
if(dropzone!=null) document.getElementById("write").innerHTML = "dropzone nicht leer";
else document.getElementById("write").innerHTML = "leer";
if(dragobjekt!=null){
dragobjekt.style.position = "";
document.getElementById(dropzone).appendChild(dragobjekt);
}
dragobjekt = null;
}
function drag(ereignis) {
//Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
posx = document.all ? window.event.clientX : ereignis.pageX;
posy = document.all ? window.event.clientY : ereignis.pageY;
if(dragobjekt != null) {
dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
}
document.getElementById("write").innerHTML = dropzone;
}
//-->
</script>
</head>
<body onload="draginit()">
<br><br><div id="write"></div>
<div onmouseover="dropzone = this.id" id="dropzone1" style="height:100px; width:300px; border:1px dashed;">Hier ablegen:</div>
<div onmousedown="dragstart(this)"> Username </div>
<div onmouseover="dropzone = this.id" id="dropzone2" style="height:100px; width:300px; border:1px dashed;">Hier ablegen:</div>
</body>
</html>Wie man sieht möchte ich einfach nur Div's mit Text darin hin- und herschieben können.
Das ganze funktioniert auch FAST!
Wenn man das ganze ausführt merkt man das man den Text verschieben kann aber manchmal "hakt" das ganze etwas oder aber wenn man den Text in eine der beiden Divs geschoben hat dann kann man es kaum noch in das andere zurückschieben.
Verstehe nicht so recht warum dies so ist, scheint mir alles richtig mehr oder weniger, aber nunja...
Krieg ich das so "billig" hin wie ich mir das da gedacht habe oder muss ich irgendwas mit Ajax etc. machen (irgendwie kommt bei google bei drag & drop auch immer Ajax, hmm...).
Wäre wirklich super wenn ihr mir da helft, sitz irgendwie (ok mit ziemlich vielen unterbrechungen) seit gestern dran...
