Internet Explorer 9 Drag and Drop (DnD)

Question

Personne ne sait pourquoi le site web suivant de glisser et déposer des exemples (et de nombreux autres tutoriels en ligne) ne fonctionne pas dans Internet Explorer 9? Chrome, FireFox et Safari sont tous OK.

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

Je pensais que IE9 était supposé être la plupart des navigateur compatible HTML5? Surtout avec le Mdn, car ils ont été soutenu dès IE5. Dois-je changer un paramètre quelque part?

Plus je joue avec HTML5 et CSS3...plus IE9 manque.

Quelqu'un aurait des liens pour le Mdn, des tutoriels qui travaillent dans IE9?

Answer 1

J'ai trouvé une solution de contournement pour que l'api native dnd fonctionne également dans IE avec des éléments autres que des liens et des images. Ajoutez un gestionnaire onmousemove au conteneur déplaçable et appelez la fonction native IE element.dragDrop (), lorsque le bouton est enfoncé:

 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 2

Eh bien, j'ai rencontré ce même comportement bizarre dans IE9, il semble que IE9 ne fasse pas de glisser-déposer (style HTML 5) sur les div. si vous voulez changer la div pour un A avec href = "#" vous pourrez glisser-déposer.

cela ne traîne pas:

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

et cela:

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

J'espère que cela aide n'importe qui

Answer 3

J'ai rencontré le même problème. Cette astuce fonctionne pour moi:

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

Il arrête la sélection et commence le glissement.

Answer 4

Cette Mdn exemple travaille dans IE9.

Je pense que l'exemple de HTML5Rocks ne travaille pas dans IE9 en raison de CSS3. L'exemple utilisé plusieurs CSS3 mais IE9 du CSS3 n'est pas bon.

En outre, certains de JS les événements et les méthodes ne fonctionnent pas sous IE. Par exemple setDragImage() n'est pas de travail, même dans IE9. C'est aussi l'un de la raison.

Answer 5

J'ai été à la recherche à cela aussi, j'ai trouvé que Opera 11.50 a le même problème; tous les deux et IE9 ne comprends pas le HTML5 attribut draggable, ni le HTML5 drag-and-drop des événements.

Comme solution, j'ai trouvé cet opéra à l'article http://dev.opera.com/articles/view/accessible-drag-and-drop/ qui émule le glisser-déposer de soutien avec mousedown, mouseover, mousemove, mouseout, et mouseup événements. Naturellement, c'est beaucoup de travail, mais il ne vous donner l'appui du mdn à l'Opéra.

Vous pouvez voir une démonstration en direct à http://devfiles.myopera.com/articles/735/example.html

La même mdn émulation astuce fonctionne avec IE9, et semble compatible avec d'autres navigateurs HTML5.