5

HTML5 ネイティブのドラッグ アンド ドロップが適用されました。ドロップは IE では機能しませんが、chrome と Firefox ではうまく機能します。

ドラッグは機能しているように見えますが、ドロップは IE では発生しません。

別の小さな質問-IEでは、ドラッグ可能な要素の周りに半透明の正方形がありますが、その背景は透明です(画像はそのように行われます)。クロム/ファイアフォックスでは、その正方形がなく、ドラッグ中に画像が背景なしで見えます.

これはドロップエリアです： 

<div id="4x2" class="dropArea" draggable="false" ondragenter="drag_enter(event); return false;" ondrop="drag_drop(event); return false;" ondragover="return false" ondragleave="drag_leave(event); return false;" data-droppable="true" onmouseover="return mouseOver(this); return false;" onclick="return movePlayer(this); return false;" onmouseout="return mouseOut(this); return false;">
</div>

これはドラッグ可能な要素です:

<div id="player1" draggable="true" ondragstart="drag_start(event); return false;" ondragend="drag_end(event); return false;" data-droppable="false" onclick="return selectPlayer(this); return false;" data-selectable="true"></div>

function drag_start(e) 
    {
        e.dataTransfer.effectallowed = 'copy';
        e.dataTransfer.dropEffect = 'copy';
        e.dataTransfer.setData("text/plain", e.target.getAttribute('id'));
    }

function drag_enter(e) {

        if (e.target.getAttribute('data-droppable') == 'true') {
            e.target.style.backgroundImage = "url(images/board_cell_background_highlight.png)";
        }

function drag_leave(e) {

        if (e.target.getAttribute('data-droppable') == 'true') {
            e.target.style.backgroundImage = "url(images/board_cell_background.png)";
        }


function drag_drop(e) {
        var element = e.dataTransfer.getData("Text"); // the player
        if (e.preventDefault) {
            e.preventDefault();
        }
        if (e.stopPropagation) {
            e.stopPropagation();
        }
        if (e.target.getAttribute('id') == "player1" || e.target.getAttribute('id') == "player2") {
            alert("invalid Move");
            return false;
        }

        e.target.style.backgroundImage = "url(images/board_cell_background.png)";
        moveHandler(element, e.target.getAttribute('id'));
    }

function drag_end(e) {
        e.dataTransfer.effectallowed = 'copy';
        alert("drop end")
        }
    }
}

コードをより短くするために、印刷物のコードをいくつか削除します。

4

4 に答える 4

5

IE10/11 は Text をデータ文字列として使用し、text/plain を使用すると壊れます。Text を使用すると、Firefox で機能しなくなります。

これを回避するには、作成する必要があるドラッグ アンド ドロップ関数で次のようなことを行います。

var setDataString = 'text/html';
// We need to change the setDataString type for IE since IE doesn't support setData and getData correctly. 
this.changeDataStringForIe = (function() {
    var userAgent = window.navigator.userAgent,
    msie = userAgent.indexOf('MSIE '),       //Detect IE
    trident = userAgent.indexOf('Trident/'); //Detect IE 11

    if (msie > 0 || trident > 0) {
        setDataString = 'Text';
        return true;
    } else {
        return false;
     }
})();

userAgent スニッフィングを使用しないソリューションを知りたいです。

于 2014-10-15T22:19:49.303 に答える
3

IE 8.1 W at 11 で [インターネット オプション セキュリティ] タブだけにドラッグ アンド ドロップしない場合は、チェック マーク ボックスの保護モードを削除するか、管理者として IE を実行します。

于 2013-12-25T17:37:28.280 に答える
3

タイプ のデータを設定していますが、タイプ のtext/plainデータを取得していますText。一部のブラウザはそれらを 1 つの同じものとして理解するかもしれませんが、他のブラウザはそうではないかもしれません。この場合、Chrome と Firefox が緩いのに対し、Internet Explorer は衒学的なようです。

個人的には、 を使用することをお勧めしTextます。それは古いかもしれませんが、イベント処理にいくつかの小さな調整が与えられれば、メモリが機能する場合、IE5 までさかのぼっても問題なく動作します。

于 2013-10-23T22:28:47.370 に答える
0

問題は、ブラウザのデフォルトがタッチ アクションではなくパン アクションであることです。 css でデフォルトのアクションを制御します。

于 2013-11-17T23:20:44.740 に答える