javascript - ejemplo - drop and drag bootstrap

Eventos de "arrastrar y soltar" del navegador: ¿alguien puede completar los espacios en blanco?

Question

Nunca he tenido la necesidad de utilizar ninguna función de arrastre hasta ahora, así que déjame informarte sobre lo que he descubierto hasta ahora:

• Los eventos de arrastre son eventos que tienen lugar cuando el usuario está arrastrando un objeto. Este es el arrastre del SO "apropiado", por ej .: agilizar texto y arrastrarlo, o incluso arrastrar algo desde fuera del navegador.
• Mientras arrastro, hasta donde puedo ver, no se dispararán otros eventos del navegador. (onmouseover es ignorado, por ejemplo). Los únicos eventos que funcionan son eventos de arrastre.
• En todos los navegadores modernos, onDragEnter y onDragOver parecen funcionar ... pero a firefox le falta "onDragLeave".
• Para descartar, FF usa "onDragDrop" mientras que IE y otros usan "onDrop", mientras que Safari no parece ser compatible.
• Los eventos solo parecen funcionar en elementos "droppable", como textarea y texto. En otros elementos solo funcionan algunos eventos.
• Varias otras peculiaridades para cada navegador que ni siquiera quiero repasar.
• Hay muy poco documentado sobre estos eventos.

Sí, debo usar drag + drop real, y no puedo simularlo.

Mis preguntas:

• ¿Hay alguna manera de detectar "ondragleave" o similar en FF?
• ¿Hay alguna manera de detectar "ondragdrop" o similar en Safari?
• ¿Tienes algo que agregar sobre Drag + Drop?

Aquí hay una plantilla rápida y sucia que muestra los eventos de arrastrar y soltar:

<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>

Answer 1

Encontré una manera de manejar OnDragLeave a través de la delegación de eventos.

Simplemente agregue un evento para monitorear "dragover" en todo el documento. Cuando el origen del evento se convierte en su elemento en cuestión, establezca un indicador, y una vez que el origen del evento ya no sea ese elemento, active el evento "dragleave".

Nota:

• Será necesario modificarlo para que "e.source == obj" sea realmente "obj.childOf (e.source)" ... ya que el elemento de origen puede ser un descendiente del objeto en cuestión.
• Requiere el marco de gestión de eventos para averiguar qué "fuente" se basa en el navegador.

Desafortunadamente, parece que la falta de "ataque" de Safari no se puede solucionar ... simplemente nunca se dispara.

Cómo lograr "dragleave" en FF (bueno, todos los navegadores):

var setOnDragLeave = function(obj, fn){
    var on=false;
    var dragover = function(e){
        if (on){
            if (e.source!=obj){
                on = false;
                e.eventname = "dragleave";
                fn.call(obj, e);
            }
            return;
        }else{
            if (e.source==obj) on = true;
            return;
        }
    }
    addEvent(document.documentElement, "dragover", dragover);
}
setOnDragLeave(obj, function(e){ logEvent(e); });

Sinceramente espero que alguien más en este planeta pueda usar esto ...

Answer 2

Buen articulo. Yo también estoy buscando un equivalente de ondrop / ondragdrop en Safari. Sin embargo, existe una solución posible para el caso de arrastrar y soltar "interno", es decir, la fuente de arrastre y el destino de colocación están en el mismo documento.

IE admite los eventos ondragstart, ondrag y ondragend en el elemento de origen de arrastre. Safari 3 dispara estos también. Firefox3 desencadena ondrag y ondragend, pero no se ejecuta de forma aleatoria (aunque la documentación sugiere que debería). De todos modos, dependiendo de su escenario, es posible que pueda usar ondragend para detectar cuándo se completa la operación de arrastrar y soltar.

Answer 3

Según parece, Firefox implementa el evento "dragleave" como "dragexit". Acabo de aprender esto ahora. Y funciona.