2

いくつかの技術的な理由から、私はjQuery UIを使用するのではなく、jQueryに独自の「ドラッグ可能」機能を実装しています。また、要素をドラッグしようとしているユーザーをリッスンするために、mousedownイベントとmousemoveイベントを使用しています。

これまでのところうまく機能しています。ピクセルごとではなく、5ピクセルの動きごとにmousemoveイベントを発生させたいと思います。私は簡単なコーディングを試みました：

$('#element').bind('mousemove', function(e) {
    if(e.pageX % 5 == 0) {
        // Do something
    }
});

ただし、動きは5ピクセルごとに安定しているわけではなく、マウスの動きが速すぎると、いくつかの手順がスキップされることがあります。これは、マウスを非常に速く動かすと、jQueryがピクセルごとにイベントをトリガーするわけではないためだと思います。

5ピクセルごとにイベントをトリガーする方法を知っていますか？

どうもありがとう、

アントニオ

4

1 に答える 1

3

あなたのコードは、ドラッグが開始された場所を考慮していません。 e.pageX違いではなく、ページ座標のみを提供します。移動距離の変化を確認する必要があります。

この投稿はかなり関連性があります。

基本的なコードは次のとおりです。

$(document).mousemove(function(event) {
    var startingTop = 10,
        startingLeft = 22,
        math = Math.round(Math.sqrt(Math.pow(startingTop - event.clientY, 2) + 
                                    Math.pow(startingLeft - event.clientX, 2))) + 'px';
    $('span').text('From your starting point(22x10) you moved:   ' + math);
});

編集：今、私はOPが話していることを理解していると思います. 上記のコードを使用して、この fiddleを作成しました。画面の左上との関係で現在の位置を追跡し、差が 5 ピクセルを超えているかどうかを確認します。

新しいスクリプト:

var oldMath = 0;
$(document).mousemove(function(event) {
    var startingTop = 10,
        startingLeft = 22,
        math = Math.round(Math.sqrt(Math.pow(startingTop - event.clientY, 2) +Math.pow(startingLeft - event.clientX, 2))) + 'px';
    $('#currentPos').text('you are at :' + math);

    if(Math.abs(parseInt(math) - oldMath) > 5){
        //you have moved 5 pixles, put your stuff in here
        $('#logPos').append('5');


        //keep track of your position to compare against next time
        oldMath = parseInt(math);
    }
});​
于 2012-10-09T01:19:58.173 に答える