web-dev-qa-db-fra.com

Internet Explorer 9 par glisser-déposer (DnD)

Quelqu'un sait-il pourquoi les exemples de glisser-déposer de sites Web suivants (ainsi que de nombreux autres didacticiels en ligne) ne fonctionnent 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 le navigateur le plus compatible avec HTML5? Surtout avec DnD car ils le supportent depuis IE5. Dois-je modifier un paramètre quelque part?

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

Quelqu'un at-il des liens vers des didacticiels DnD fonctionnant dans IE9?

html5drag-and-dropinternet-explorer-9
31
SteveJ

Eh bien, j'ai rencontré ce même comportement étrange 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 en 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 va:

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

J'espère que cela aide quelqu'un

21
Didier Caron

J'ai trouvé un moyen de faire en sorte que l'API dnd native 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 élément.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
25
terabaud

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.

3
Ali Gangji

Cet exemple DnD fonctionne dans IE9. 

Je pense que l'exemple de HTML5Rocks ne fonctionne pas dans IE9 à cause des fonctionnalités CSS3. L'exemple utilisé utilise plusieurs fonctionnalités CSS3, mais la prise en charge de CSS3 par IE9 n'est pas satisfaisante. 

En outre, certains événements et méthodes JS ne fonctionnent pas dans IE. Par exemple, setDragImage() ne fonctionne même pas dans IE9. C'est aussi l'une des raisons.

2
Sanghyun Lee

Je me suis penché là-dessus aussi, j'ai constaté qu'Opera 11.50 avait le même problème fondamental; et IE9 ne comprennent pas l'attribut glissable HTML5 ni les événements glisser-déposer HTML5.

En guise de solution de contournement, j'ai trouvé cet article d'opéra sur http://dev.opera.com/articles/view/accessible-drag-and-drop/ qui émule un support glisser-déposer avec mousedown, mouseover événements mousemove, mouseout et mouseup. Naturellement, c’est beaucoup de travail, mais cela vous apporte un soutien précieux dans Opera.

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

Le même truc d’émulation dnd fonctionne avec IE9 et semble compatible avec d’autres navigateurs HTML5.

1
adamrmcd

J'ai le même problème que Didier Caron ci-dessus. Les variables divs déplaçables ne fonctionnent pas, mais les balises d'ancrage fonctionnent correctement. J'ai trouvé une solution à HTML5 Doctor .

0
jaysmith024

Je suggérerais d'utiliser jQuery UI's draggable .

0
AlexC

utilisez les éléments dont la propriété draggable est définie sur true par défaut. ils le et cela devrait fonctionner Vive

0
Hubert Boma Manilla

Cela fonctionne pour moi. IE9 se comporte comme les autres navigateurs modernes en ce qui concerne le glisser/déposer:

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;
            }
        }
    });
}
0
Bernardo