ドラッグする前にコンテンツ選択をクリアするクロスブラウザメソッド

Question

HTML5ドラッグを実行する直前にコンテンツ選択をクリアする際に発生するさまざまなクロスブラウザの問題を解決しようとしていました。

現在の進行状況はここにある： https://jsfiddle.net/kamelkev/36ek328t/

$(document).ready(function() { 
    var down = 0; 

    $(document.body).on('dragstart.draggable', function(event) { 
    if (!$(event.target).attr('draggable')) { 
     event.preventDefault(); 
    } 

    return; 
    }); 

    $('div[draggable]').on('dragstart', function(event) { 
    event.originalEvent.dataTransfer.setData("Text", ''); 
    }); 

    $('div[draggable]').on('mousedown.selections', function(event) { 
    down = 1; 

    return true; 
    }); 

    $('div[draggable]').on('mouseup.selections', function(event) { 
    down = 0; 

    return true; 
    }); 

    $('div[draggable]').on('mousemove.selections', function(event) { 
    var doc = event.target.ownerDocument; 

    if (down) { 
     if (doc.selection) { 
     doc.selection.empty(); 
     } 
     else if (doc.getSelection) { 
     if (doc.getSelection().empty) { // Chrome 
      doc.getSelection().empty(); 
     } 
     else if (doc.getSelection().removeAllRanges) { // Firefox 
      doc.getSelection().removeAllRanges(); 
     } 
     } 

     down = 0; 
    } 
    else { 
     down = 0; 
    } 

    return true; 
    }); 
}); 

クローム/サファリ/ Firefoxでは、あなたが気づくすべて（コマンド-a）のコンテンツを選択し、「thing2」にドラッグを実行する意志だけでは明らかではないことドラッグイベントが進行するのを許可します。なんらかの理由でIEは選択をクリアしますが、その後のdragstartイベントを一見キャンセルします。

マイクロソフト自身のドキュメントなどの中で、このタイプの動作についての言及はゼロになります。どんな指針も大変ありがとうございます。

私はこの問題を回避するために、私の様々な選択クリアコードをさまざまなイベントなどに移動することを試みましたが、運はありません。

これを解決する方法はありますか？

これは、HTML5ドラッグを実行する際にドラッグイメージの問題を避けるために特に行っています。 HTML5ドラッグを実行する際に表示される「ゴースト」画像は、ドラッグされる要素からではなく、ドラッグされたすべてのコンテンツのサム部分から生成されます。ユーザがセレクトオールをした場合、後で生成されるドラッグ画像は、ドラッグされる要素のコンテンツだけでなく、ゴースト画像のためにすべてのコンテンツを使用する。 firefox/safari/chromeには問題はありませんが、カスタムドラッグイメージを設定する機能はありますが、IEではいくつかの選択肢があります。

Answer 1

多数のイベント順列を試した後、実行可能な回避策が見つかりました。

IE mousemoveハンドラ内の選択項目をクリアすると、dragStartイベントが一度も実行されないように見えます。これは他のブラウザとは一貫していません（通常通り）。しかし、私は、あなたがiframeを扱わない限り、dragStartハンドラの中の選択をクリアすることが期待どおりに機能することを発見しました。あなたがiframeを扱っているのであれば、あなたはmousedownがあなたと一緒に働くことができる唯一の実行可能なイベントだと思います。

しかし、他のブラウザでは、どちらかと思われるように動作しません。ドラッグスタートハンドラ内の選択をクリアすると、予想されるdragmoveイベントが発生しないように見えます。

解決策は、すべてのIEブラウザのdragstartハンドラ内で選択クリアを処理し、他のすべてのブラウザのmousemoveハンドラで行うことです。