Bis jetzt hatte ich noch nie das Bedürfnis, irgendwelche Ziehfunktionen zu verwenden, also möchte ich Ihnen erzählen, was ich bisher entdeckt habe:
- Ziehereignisse sind Ereignisse, die auftreten, wenn der Benutzer ein Objekt zieht. Dies ist "richtiges" OS-Ziehen, z.B.: Hiliting eines Textes und Ziehen desselben, oder sogar das Ziehen von etwas von außerhalb des Browsers.
- Während des Ziehens werden, soweit ich das beurteilen kann, keine anderen Browser-Ereignisse ausgelöst. (onmouseover wird zum Beispiel ignoriert). Die einzigen Ereignisse, die funktionieren, sind Ziehereignisse.
- In allen modernen Browsern scheinen onDragEnter und onDragOver zu funktionieren... aber in Firefox fehlt "onDragLeave".
- Zum Ablegen verwendet FF "onDragDrop", während IE und andere "onDrop" verwenden, während Safari dies nicht zu unterstützen scheint.
- Ereignisse scheinen nur bei "abwerfbaren" Elementen wie Textarea und Text zu funktionieren. Bei anderen Elementen nur einige Veranstaltungen arbeiten.
- Verschiedene andere Macken für jeden Browser, die ich nicht einmal aufzählen möchte.
- Über diese Ereignisse gibt es nur sehr wenige Unterlagen.
Ja, ich muss tatsächlich Drag+Drop verwenden und nicht simulieren können.
Meine Fragen:
- Gibt es eine Möglichkeit, "ondragleave" oder ähnliches in FF zu erkennen?
- Gibt es eine Möglichkeit, "ondragdrop" oder ähnliches in Safari zu erkennen?
- Haben Sie etwas über Drag + Drop hinzuzufügen?
Hier ist eine schnelle und schmutzige Vorlage, die Drag-and-Drop-Ereignisse demonstriert:
<script>
addEvent = function(obj, eventname, fn){
if (document.addEventListener) obj.addEventListener(eventname, fn, false);
else obj.attachEvent('on'+eventname, fn);
}
window.onload = function(){
var logger = document.getElementById("logger");
var log = function(str){ logger.value = str + logger.value; }
//log a variety of drag events for the textarea
var obj = document.getElementById("tarea");
var events = ["dragenter","dragover","dragout","dragleave","dragdrop","drop"];
for (var i=0; i<events.length; i++){
(function(event){//create a closure to remove variable scope
addEvent(obj, event, function(){ log("textarea: " + event + "\n"); });
})(events[i]);
}
//log events on the div
obj = document.getElementById("div");
events = ["mouseover","mouseout","mouseup","mousedown","click","dblclick",
"dragenter","dragover","dragout","dragleave","dragdrop","drop"];
for (var i=0; i<events.length; i++){
(function(event){//create a closure to remove variable scope
addEvent(obj, event, function(){ log("div: " + event + "\n"); });
})(events[i]);
}
}
</script>
Life's a drag when doing cross browser stuff.<br><br>
<div id="div" style="width: 100px; height: 100px; background: green; float: left;">
</div>
<textarea id="tarea" style="width: 100px; height: 100px; float: left; margin: 0px 5px;">
</textarea>
<textarea id="logger" style="width: 200px; height: 400px; float: left;">
</textarea>
