javascript - tag - ios html video not playing

Safari 5.1 rompió HTML nativo arrastrar y soltar?

Question

Anoche, pensé que haría un proyecto rápido para demostrar las capacidades de HTML5 y probar algunas cosas. Sin embargo, no puedo encontrar la forma de hacer que el arrastrar y soltar funcione en Safari, mientras que funciona perfectamente en Chrome y Firefox. Más precisamente, parece que el evento de caída no se activa en Safari, cuando intenta arrastrar una imagen dentro del sitio web al área de colocación. Al mismo tiempo, se dispara cuando arrastra y suelta un archivo desde el escritorio.

No estoy muy seguro, pero estoy bastante seguro de que cuando probé el mismo script en el trabajo (donde tengo Safari 5.0.2, etc.), se activó el evento Drop (se revisará mañana para estar seguro) y se dio Me los errores relacionados con FileReader que se esperaban. Pero cuando acabo de instalar Safari 5.1 en mi propia PC, solo obtengo dragover, entro y dejo eventos (y también lo suelto si el archivo fue arrastrado al navegador).

He estado buscando en Google por algún tiempo y parece que no encuentro un solo ejemplo de arrastrar y soltar que realmente funcione en Safari 5.1. Incluso la muestra del centro de dev de Safari no funciona, por no hablar de html5demo.com 1 y html5demo.com 2 . Esto me lleva a pensar si Safari tiene un error, o quizás hayan implementado algo obligatorio que no se refleja en el centro de desarrollo (actualizado por última vez en 2009).

El script que estoy tratando de corregir está en mi sitio (lo siento, no hay ningún código específico para publicar, ya que parece estar roto en otro lugar también).

¡PD! Es posible que haya introducido algunos errores en mi propio sitio mientras intentaba desesperadamente solucionar el problema de Safari, pero estoy demasiado cansado para corregirlos ahora mismo.

ACTUALIZACIÓN: acabo de confirmar en el trabajo que el evento Drop no se activa en Safari 5.0.2 en Mac OS X.

ACTUALIZACIÓN 2: También confirmó que todo funciona perfectamente bien con Safari 5.0.6 en Win 7, la misma computadora que falla con 5.1

Answer 1

Encontré problemas similares, el evento de caída parecía no estar disparándose. Aparentemente, Safari espera que el evento "dragón" también esté vinculado. Tan pronto como también agregué eso, funcionó. Así que ... estoy compartiendo en caso de que sea relevante.

Mi primer intento:

$(document).bind 
  drop: (e) ->
    // This never gets fired in safari (does work in chrome)
    console.log e.originalEvent.dataTransfer.files
    false

Mi "arreglo":

$(document).bind 
  dragover: (e) ->
    console.log e
    false
  drop: (e) ->
    // This does get fired (in chrome and safari)
    console.log e.originalEvent.dataTransfer.files
    false

Answer 2

Estoy usando Safari 5.1.5 (7534.55.3) en una PC con Windows 7 que acabo de instalar el otro día, no hay instalaciones anteriores de Safari y no puedo hacer funcionar ninguna de las demostraciones de arrastrar y soltar de HTML5 en línea.

Estoy trabajando en un proyecto con arrastrar y soltar y Modernizr me dice que puedo ir con Safari (Modernizr.draganddrop == true), pero cuando suelto el elemento, el evento drop no se dispara.

He añadido la depuración de alertas y nada.

Mis pruebas muestran que Safari 5.1.5 (7534.55.3) en un evento de caída de PC con Windows 7 está roto. Todos los demás eventos de arrastre parecen funcionar: dragstart, dragend, dragenter, dragleave, dragover.

Answer 3

Pruebas con Safari 5.1.7 Mac:

Para ver que se dispare el evento drop , debe controlar el evento dragover y llamar a event.preventDefault() .

Aquí está la discusión (bastante entretenida) donde encontré la respuesta:

http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

No sé si esto realmente resuelve la pregunta porque el sitio del autor de la pregunta (al menos a partir de hoy) hace esto. Funciona bien en mi máquina (al igual que las páginas de demostración HTML5). Pero esto puede ayudar a alguien que viene a este hilo con este problema que no conoce este detalle de implementación poco intuitivo.

Answer 4

Solo para aclarar: visitó su sitio y no encontró errores. Abrí la consola, sin errores, y todo parecía funcionar como estaba diseñado. Intenté todos los ejemplos proporcionados sin error.

Todos los ejemplos funcionan bien Safari Versión 5.1 (7534.48.3). Lo siento, amigo. ¿Tal vez es un ajuste que has cambiado?

Permíteme sugerir una posibilidad:

Vaya a Safari -> Empty Cache... Luego Safari -> Reset Safari... Intente volver a cargar la página.

Probablemente, hay algo en caché que está creando un conflicto. Parece que no hay nada malo con su guión en lo más mínimo.

Editar

Algunas cosas para comprobar ...

¿Alguno de sus nombres de funciones contiene palabras reservadas? He hecho esto, si no hubiera arrojado ningún error, pero simplemente no funcionaría.

He tenido algunos problemas extraños con Safari que no ejecuta métodos escritos como funcName = function(){} . Si puede precisar el método que no se está activando (agrego una pequeña función cuando estoy desarrollando el llamado DBG que agregaré a continuación, básicamente, si se establece un indicador de depuración, se registra en la consola), puede Intenta reescribir la función.

// Some sort of boolean flag.
var debug = true;

// This is kind of an obvious function, but can be expanded as you like.
// Little tricks to make life easier.
function DBG(str) {
  debug ? console.log(str) : return;
}

Todavía creo que, en última instancia, esto se reduce a un error de almacenamiento en caché, pero vale la pena intentarlo.