7

これまでドラッグ機能を使用する必要がなかったので、これまでに発見したことについて説明します。

  • ドラッグイベントは、ユーザーがオブジェクトをドラッグしているときに発生するイベントです。これは「適切な」OSドラッグです。たとえば、テキストをハイライトしてドラッグしたり、ブラウザの外部から何かをドラッグしたりします。
  • ドラッグしている間、私が知る限り、他のブラウザイベントは発生しません。（たとえば、マウスオーバーは無視されます）。動作するイベントはドラッグイベントのみです。
  • 最近のすべてのブラウザでは、onDragEnterとonDragOverが機能しているように見えますが、Firefoxには「onDragLeave」がありません。
  • ドロップには、FFは「onDragDrop」を使用しますが、IEなどは「onDrop」を使用しますが、Safariはそれをサポートしていないようです。
  • イベントは、textareaやtextなどの「ドロップ可能な」要素でのみ機能するようです。他の要素では、一部のイベントのみが機能します。
  • 私が行きたくないブラウザごとのその他のさまざまな癖。
  • これらのイベントについてはほとんど文書化されていません。

はい、実際のドラッグ+ドロップを使用する必要があり、シミュレートできません。

私の質問：

  • FFで「ondragleave」などを検出する方法はありますか？
  • Safariで「ondragdrop」などを検出する方法はありますか？
  • ドラッグ+ドロップについて何か追加することはありますか？

ドラッグアンドドロップイベントを示す、すばやく汚いテンプレートを次に示します。

<script>
    addEvent = function(obj, eventname, fn){
        if (document.addEventListener) obj.addEventListener(eventname, fn, false);
        else obj.attachEvent('on'+eventname, fn);
    }

    window.onload = function(){
        var logger = document.getElementById("logger");
        var log = function(str){ logger.value = str + logger.value; }

        //log a variety of drag events for the textarea
        var obj = document.getElementById("tarea");
        var events = ["dragenter","dragover","dragout","dragleave","dragdrop","drop"];
        for (var i=0; i<events.length; i++){
            (function(event){//create a closure to remove variable scope
                addEvent(obj, event, function(){ log("textarea: " + event + "\n"); });
            })(events[i]);
        }

        //log events on the div
        obj = document.getElementById("div");
        events = ["mouseover","mouseout","mouseup","mousedown","click","dblclick",
                "dragenter","dragover","dragout","dragleave","dragdrop","drop"];
        for (var i=0; i<events.length; i++){
            (function(event){//create a closure to remove variable scope
                addEvent(obj, event, function(){ log("div: " + event + "\n"); });
            })(events[i]);
        }
    }
</script>
Life's a drag when doing cross browser stuff.<br><br>
<div id="div" style="width: 100px; height: 100px; background: green; float: left;">
</div>
<textarea id="tarea" style="width: 100px; height: 100px; float: left; margin: 0px 5px;">
</textarea>

<textarea id="logger" style="width: 200px; height: 400px; float: left;">
</textarea>
4

3 に答える 3

6

イベント委任を介してonDragLeaveを処理する方法を見つけました。

ドキュメント全体の「ドラッグオーバー」を監視するイベントを追加するだけです。イベントソースが問題の要素になったら、フラグを設定し、イベントソースがその要素でなくなったら、「ドラッグリーブ」イベントを発生させます。

ノート：

  • ソース要素は問題のオブジェクトの子孫である可能性があるため、「e.source ==obj」が実際には「obj.childOf（e.source）」になるように変更する必要があります。
  • ブラウザに基づく「ソース」を把握するには、イベント処理フレームワークが必要です。

残念ながら、Safariの「オンドロップ」の欠如は修正できないようです...それは単に解雇されることはありません。

FFで「ドラッグリーブ」を実現する方法（まあ、すべてのブラウザ）：

var setOnDragLeave = function(obj, fn){
    var on=false;
    var dragover = function(e){
        if (on){
            if (e.source!=obj){
                on = false;
                e.eventname = "dragleave";
                fn.call(obj, e);
            }
            return;
        }else{
            if (e.source==obj) on = true;
            return;
        }
    }
    addEvent(document.documentElement, "dragover", dragover);
}
setOnDragLeave(obj, function(e){ logEvent(e); });

この惑星の他の誰かがこれを使用できることを心から願っています...

于 2009-01-26T06:51:08.917 に答える
0

いい記事。私もSafariでondrop/ondragdropに相当するものを探しています。ただし、「内部」ドラッグドロップの場合、つまりドラッグソースとドロップターゲットが同じドキュメント内にある場合の回避策が考えられます。

IEは、ドラッグソース要素のイベントondragstart、ondrag、およびondragendをサポートします。Safari3もこれらを起動します。Firefox3はondragとondragendを起動しますが、ondragstartは起動しません（ドキュメントではそうすべきであると示唆されていますが）。とにかく、シナリオによっては、ドラッグアンドドロップ操作が完了したことを検出するためにondragendを使用できる場合があります。

于 2009-02-18T00:29:11.623 に答える
0

Firefox は "dragleave" イベントを "dragexit" として実装しているようです。たった今これを学んだ。そして、それは機能します。

于 2009-06-03T20:27:17.573 に答える