web-dev-qa-db-ja.com

Internet Explorer 9のドラッグアンドドロップ（DnD）

次のWebサイトのドラッグアンドドロップの例（および他の多くのオンラインチュートリアル）がInternet Explorer 9で機能しない理由を知っていますか？ Chrome、FireFox、Safariはすべて問題ありません。

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

IE9は最もHTML5に準拠したブラウザであると考えていましたか？特にIE5以来サポートしてきたDnDで。どこかで設定を変更する必要がありますか？

HTML5とCSS3で遊ぶほど、IE9が不足します。

IE9で動作するDnDチュートリアルへのリンクはありますか？

html5drag-and-dropinternet-explorer-9
31
SteveJ

IE9でもこの同じ奇妙な動作に遭遇しましたが、IE9はdivでドラッグアンドドロップ（HTML 5スタイル）を実行しないようです。 href = "＃"でAのdivを変更する場合、ドラッグアンドドロップできます。

これはドラッグしません：

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

そしてこれは：

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

これが誰にも役立つことを願っています

21
Didier Caron

ネイティブdnd apiをIEでリンクと画像以外の要素で動作させるための回避策を見つけました。ドラッグ可能なコンテナにonmousemoveハンドラを追加し、ネイティブIE function element.dragDrop（）、ボタンが押されたとき：

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
Lea Rosema

同じ問題が発生しました。このトリックは私のために働く：

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

選択を停止し、ドラッグを開始します。

3
Ali Gangji

このDnDの例 はIE9で機能しています。

HTML5Rocksの例 は、CSS3機能のためにIE9で機能しないと思います。この例ではいくつかのCSS3機能を使用しましたが、IE9のCSS3サポートは適切ではありません。

さらに、JSイベントおよびメソッドの一部はIEで機能しません。たとえば、setDragImage()はIE9でも動作しません。これも理由の1つです。

2
Sanghyun Lee

私もこれを見てきましたが、Opera 11.50にも同じ基本的な問題があることがわかりました;それとIE9はHTML5のドラッグ可能な属性もHTML5のドラッグアンドイベントをドロップします。

回避策として、これを見つけましたoperaの記事 http://dev.opera.com/articles/view/accessible-drag-and-drop/ mousedown、mouseover、mousemove、mouseout、mouseupイベントでドラッグアンドドロップのサポートをエミュレートします。当然、これは多くの作業ですが、Operaではdndサポートを提供します。

http://devfiles.myopera.com/articles/735/example.html でライブデモを見ることができます

同じdndエミュレーショントリックはIE9でも機能し、他のHTML5ブラウザーと互換性があります。

1
adamrmcd

これは私のために働く。 IE9は、ドラッグアンドドロップに関する限り、他の最新のブラウザーと同様に動作します。

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

jQuery UIのドラッグ可能 を使用することをお勧めします。

0
AlexC

デフォルトでtrueに設定されたdraggableプロパティを持つ要素を使用します。彼らはそれが動作するはずです

0
Hubert Boma Manilla