javascript - que - Efecto de arrastrar y soltar en HTML5, permitido y soltar.
drag and drop jquery example (2)
Revisé tu violín y tengo la misma respuesta en Chrome e IE 10, es decir, el cursor muestra el signo de copia mientras arrastra, pero no copia / mueve el rectángulo. Puede obtener ayuda de http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
La relación entre estas dos propiedades parece haber sido la fuente de cierta confusión. Basándome en leer tanto el sitio de MDN como MSDN , pensé que lo había descubierto, pero ahora no estoy seguro ...
Pensé que cuando se arrastra un elemento, puede especificar qué se le puede permitir (es decir, se puede mover, copiar, vincular a una de las constantes effectAllowed). Esta es la propiedad effectAllowed.
Diferentes objetivos de caída hacen cosas diferentes, por lo que cuando arrastra otro elemento, puede controlar qué "efecto" tiene lugar en la caída, esta es la propiedad "dropEffect". Así que configuro un ejemplo simple para probar esta teoría.
$("[draggable=''true'']").on("dragstart", function(e) {
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = "copyMove";
dt.setData("text/plain", "Foo");
});
$("#dropZoneCopy").on("dragover", function(e) {
var dt = e.originalEvent.dataTransfer;
dt.dropEffect = "copy";
e.preventDefault();
});
$("#dropZoneMove").on("dragover", function(e) {
var dt = e.originalEvent.dataTransfer;
dt.dropEffect = "move";
e.preventDefault();
});
Tengo un cuadro que el usuario puede arrastrar: los efectos permitidos son "copyMove". Tengo un cuadro que configura dropEffect para copiar, y una vez que establece dropEffect para mover. Lo que espero es que cuando el usuario arrastra el "cuadro de copia" el cursor cambie para indicar que ocurrirá una copia, mientras arrastro sobre el "cuadro de movimiento" el cursor cambia para indicar un movimiento ...
Solo Chrome se comporta como yo esperaría. Es porque el otro navegador está equivocado o porque no entiendo la especificación. correctamente?
ACTUALIZACIÓN Un poco más de información de juguetear con esto.
Tanto en Firefox como en Chrome, si tiene una fuente de arrastre que indica que effectAllowed es "copiar" y una zona de descarga que dice dropEffect es "mover", no puede soltar en la zona de colocación incluso si cancela el evento. Pensé que dropEffect sería útil para leer ondrop para ver qué hacer, pero no está disponible en Chrome, el dropEffect no aparece en el controlador de drop, por ejemplo, tratar de leer el dataTransfer.dropEffect dirá que el dropEffect es " ninguno "a pesar de que lo pones en dragover. La configuración de dropEffect como se indicó anteriormente influye en la forma en que se muestra el cursor.
En Firefox, el dropEffect llega a la zona de caída después de configurarse en dragover, pero no influye en la visualización del cursor del mouse. En las ventanas de Firefox, presionar la tecla ctrl afecta la visualización del mouse, pero no afecta la propiedad dropEffect.
La especificación muestra que la fuente puede escuchar el evento dragend para ver qué sucedió. Debería mirar el efecto de caída dentro de este evento. Chrome, Mozilla y Safari funcionan como esperaría aquí, el efecto de gota aparece en el evento dragend. En IE, si el efecto permitido es un valor simple, por ejemplo, "copiar", cualquier caída exitosa en este valor aparecerá como el efecto de caída en el arrastre. Si effectAllowed era un valor compuesto como copyMove e intentaste seleccionar "move" en dragover configurando el dropEffect, no tienes suerte, eso aparecerá como dropEffect = "none" en la fuente del dragend. Te quedas atascado con un cursor y un efecto de caída y ese es el efecto que se permite en el inicio del dragado si ese efecto es un valor simple. Interesantemente, parece que el dropEffect aparece cuando se arrastra a una aplicación nativa desde IE11 al menos (y supongo que antes).
Otras notas
En Safari en un mac - effectAllowed no se puede establecer mediante programación, por lo tanto, cualquier dropEffect que se establezca es válido. Cuando presiona la tecla cmd, el efecto permitido se convierte en "mover" y cuando presiona la tecla alt el efecto permitido se convierte en "copiar". A partir de entonces, funcionará como se esperaría, si el efecto drop no es uno de estos efectos, el navegador no permite la caída.
Más información He pasado algo de tiempo libre trabajando en una biblioteca de arrastrar y soltar en HTML5. Escribí un montón más sobre esto y otros problemas en los documentos para ello. Si está interesado, eche un vistazo al proyecto.
Sé que esta no es realmente la mejor respuesta, pero podría usar un marco de UI como JQUERY UI que ya tiene incorporado arrastrar / soltar con una variedad de características. Probablemente vence la reconstrucción de la función.