html5 - imagenes - Internet Explorer 9 Arrastrar y soltar(DnD)

events drag and drop html5

Question

¿Alguien sabe por qué los siguientes ejemplos de arrastrar y soltar del sitio web (más muchos otros tutoriales en línea) no funcionan en Internet Explorer 9? Chrome, FireFox y Safari están bien.

http://www.html5rocks.com/tutorials/dnd/basics/

Pensé que se suponía que IE9 sería el navegador más compatible con HTML5. Especialmente con DnD ya que lo han estado soportando desde IE5. ¿Tengo que cambiar una configuración en algún lugar?

Cuanto más juego con HTML5 y CSS3 ... más falta IE9.

¿Alguien tiene enlaces a los tutoriales de DnD que funcionan en IE9?

Answer 1

Bueno, he encontrado este mismo comportamiento extraño en IE9, parece ser que IE9 no hará un Arrastrar y soltar (estilo HTML 5) en div''s. si cambias el div para una A con href = "#", podrás arrastrar y soltar.

esto no arrastrará:

<div data-value="1" class="loadedmodule-container" draggable="true">drag</div>

y esto:

<a href="#" data-value="1" class="loadedmodule-container" draggable="true">drag</a>

Espero que esto ayude a cualquiera

Answer 2

Encontré un workarround para hacer que la APD nativa dnd también funcione en IE con elementos que no sean enlaces e imágenes. Agregue un controlador onmousemove al contenedor arrastrable y llame a la función IE nativa element.dragDrop (), cuando se presione el botón:

function handleDragMouseMove(e) {
    var target = e.target;
    if (window.event.button === 1) {
        target.dragDrop();
    }
}

var container = document.getElementById(''widget'');
if (container.dragDrop) {
    $(container).bind(''mousemove'', handleDragMouseMove);
}

// todo: add dragstart, dragover,... event handlers

Answer 3

Esto funciona para mí Hace que IE9 se comporte como otros navegadores modernos en cuanto a arrastrar / soltar:

if (document.doctype && navigator.appVersion.indexOf("MSIE 9") > -1) {
    document.addEventListener(''selectstart'', function (e) {
        for (var el = e.target; el; el = el.parentNode) {
            if (el.attributes && el.attributes[''draggable'']) {
                e.preventDefault();
                e.stopImmediatePropagation();
                el.dragDrop();
                return false;
            }
        }
    });
}

Answer 4

Estoy teniendo el mismo problema que Didier Caron arriba. Las divisorias arrastrables no funcionan, pero las etiquetas de anclaje funcionan bien. Encontré una solución en HTML5 Doctor .

Answer 5

He encontrado el mismo problema. Este truco funciona para mí:

node.addEventListener(''selectstart'', function(evt) {
    this.dragDrop();
    return false;
}, false);

Detiene la selección e inicia el arrastre.

Answer 6

He estado viendo esto también, he encontrado que Opera 11.50 tiene el mismo problema básico; tanto él como IE9 no comprenden el atributo HTML5 arrastrable, ni los eventos de arrastrar y soltar HTML5.

Como solución alternativa, encontré este artículo de ópera en http://dev.opera.com/articles/view/accessible-drag-and-drop/ que emula el soporte para arrastrar y soltar con mousedown, mouseover, mousemove, mouseout, y eventos de mouseup. Naturalmente, esto es mucho trabajo, pero te da soporte en Opera.

Puede ver una demostración en vivo en http://devfiles.myopera.com/articles/735/example.html

El mismo truco de emulación dnd funciona con IE9, y parece ser compatible con otros navegadores HTML5.

Answer 7

Sugeriría usar el arrastrable de jQuery UI .

Answer 8

use el elemento que tiene la propiedad arrastrable establecida en true de manera predeterminada. ellos el y debería funcionar Cheers

Answer 9

Este ejemplo de DnD está funcionando en IE9.

Creo que http://www.html5rocks.com/tutorials/dnd/basics/ no funciona en IE9 debido a las características de CSS3. El ejemplo usó varias características de CSS3 pero el soporte de IE9 en CSS3 no es bueno.

Además, algunos de los eventos y métodos de JS no funcionan en IE. Por ejemplo, setDragImage() no funciona incluso en IE9. Esta es también una de las razones.