8

私は、Web ページ内や他のアプリケーション (Word や PDF ドキュメントなど) からのテキストのドラッグ アンド ドロップを大量に行う Web アプリケーションを構築しています。マウスがダウン(クリック)またはアップ(リリース)されている場合、マウスの現在の状態を取得する必要があります。現在、Webページ内でテキストをドラッグしている場合、マウスの現在の状態を取得できますが、マウスが別のアプリケーションから来て、単語を言ってテキストをドラッグしている場合、マウスの状態を取得できません。マウスのダウンまたはアップ状態を取得するためのポインターは本当に高く評価されています。

4

4 に答える 4

3

私が理解している問題は、マウスの左ボタンがウィンドウの外で押された場合（ドラッグ操作のために）、マウスの左ボタンが押されているかどうかを判断する必要があることです。

いくつかの問題があります。

  • ドラッグ操作中に発生する mousemove イベントはありません
  • 現在のボタンの状態のデータはブラウザによって異なります

私はこの解決策を思いつきました：

/**
 * keeps track of the current active mouse button.
 * @param notifier {Function} called when the active button is updated.
 * @param oneCallPerStateChange {Boolean} (defaults to false) if true the notifier will be called only when the active button changes.
 */
function initActiveButtonWatcher(notifier, oneCallPerStateChange) {

    // create variable to store button states.
    var _activeButton = -1, activeButton = 0

    // function to set the current active button.
    function updateMouseState(e) {

        // update active button.
        activeButton = typeof e.buttons === "number" ? e.buttons : e.which

        // notify if the active button is different.
        if ( oneCallPerStateChange? (_activeButton !== activeButton && typeof notifier === "function") : (typeof notifier === "function")) {
            notifier(activeButton)
        }

        // store the last state in order to be able to tell if the state has changed.
        _activeButton = activeButton
    }

    // function to get the current active button.
    function getButtonState() { return activeButton }

    // update the button state when the mouse is moved
    // or an item is dragged into the window.
    window.addEventListener("mousemove", updateMouseState, false)
    window.addEventListener("dragover", function() { updateMouseState({which: 1}) }, false)
    window.addEventListener("dragleave", function() { updateMouseState({which: 0}) }, false)

    // expose the getter on the global object.
    window.getButtonState = getButtonState
}

上記のソリューションは、mousemove イベントと dragover イベントにバインドします。Chrome はドラッグオーバー イベントで正しいボタン値を持つ有効なイベント オブジェクトを取得しますが、FireFox は取得しないことがわかりました。ドラッグ操作中のマウスの左ボタンの状態はかなり明らかだと思います。押されますよね？クリックして移動しないとドラッグできません。そのため、ドラッグオーバーで状態を 1 (左下) に設定しました。同様に、dragleave では、値はゼロに設定されます。

通常のドラッグオーバー、ドラッグスタート、エンド、ドロップなどのすべての処理を実行して、デフォルトのブラウザー アクションを防止し、window.getButtonState() によって返される値は、常に現在アクティブなマウス ボタンの値にする必要があります。

ページの最初の h1 タグの値を現在押されているボタンに設定する使用例を次に示します。

;(function() {

    var active = document.getElementsByTagName("h1")[0]

    function translate(n) {
        switch (n) {

            case 0:
                return "none"
                break;
            case 1:
                return "left"
                break;
            case 2: case 4: // Firefox calls it 4, the values differ between browsers I find.
                return "middle"
                break;
            case 3:
                return "right"
        }
    }

    initActiveButtonWatcher(
        function(currentActive) {
            active.innerHTML = "Active button: " + translate(currentActive)
        }
    )

})()

さまざまな値を処理するためにクロスブラウザを微調整する必要があります (FF は中央ボタンに対して 4 を報告するなど)、この方法で現在のボタンを適切に取得できるはずです。

試してみてください: http://jsfiddle.net/6BUA4/

于 2013-07-18T23:18:02.930 に答える
0

状態の変数を用意します:デモ-コード

var _isMouseDown = false;

$(document).on("mousedown", function(event) {
    _isMouseDown = true;
});
$(document).on("mouseup", function(event) {
    _isMouseDown = false;
});

次に_isMouseDown、マウスがダウンしているかどうかを確認できます。

またはよりコンパクト:デモ-コード

$(document).on("mousedown mouseup", function(event) {
    _isMouseDown = event.type == "mousedown";
});

グローバル変数が必要ない場合は、 jQuery のメソッド を_isMouseDownスローして保存できます:デモ-コードdata

$(document).on("mousedown mouseup", function(event) {
    $(this).data( "_isMouseDown", (event.type == "mousedown") );
});

そしてチェックスロー：$(document).data("_isMouseDown")

于 2012-04-11T09:43:35.627 に答える
0

新しい堅牢な HTML5 ドラッグ アンド ドロップを探している http://www.w3schools.com/html/html5_draganddrop.asp

あなたが探しているイベントは「ドロップ」です

<div id="droppable" 
 ondragover="event.preventDefault()" 
 ondrop="event.preventDefault(); 
  console.log(event); 
  console.log(event.dataTransfer.getData('text/plain'))">

もちろん、このコードを js ファイルに移動する必要がありますが、これは何が行われたかの例を示しています。その外側のドロップの中身を読んだり、アップロードに使用したりすることもできます。

event.dataTransfer http://www.tutorialspoint.com/html5/html5_drag_drop.htmに関する詳細情報は次のとおりです。

于 2013-07-17T07:31:37.483 に答える