2

jQuery ライブラリのマウス イベントについて質問があります。次のような単純なJavaScript関数があります。

$(function() {
    var xpos;
    var ypos;
    $("#pic1").mousedown(function() {
        $("#pic1").mousemove(function(e) {
            xpos = e.pageX;
            ypos = e.pageY;
            $("#pic1").css({'left': xpos, 'top': ypos});
        });
    });
});

画像をクリックすると、マウスが動き回ります。mouseup 関数を使用してフォローを停止しようとしていますが、css 座標を更新する「repaint」メソッドを壊すことはできないようです。

HTML:

<img id="pic1" src="img/test.jpg" alt="">

CSS:

#pic1 {
position: absolute;
}

これを達成するためのより簡単な方法はありますか？

4

4 に答える 4

0

jquery ui ドラッグ可能を使用したくない場合、構造は次のようになります。

$(function() {        
    $("#pic1").on('mousedown', function() {
        $(this).on('mousemove', function(e) {
            $(this).css({'left': e.pageX, 'top': e.pageY});
        });
    }).on('mouseup', function() {
        $(this).off('mousemove');
    });
});
于 2013-10-13T04:14:57.263 に答える
0

.on()jQueryとを使用した小さなリファクタリングを次に示し.off()ます。

$(function() {
    var xpos,
        ypos,
        $pic = $('#pic1');

    $pic.on('mousedown', function() {
        $pic.on('mousemove', function(e) {
            xpos = e.pageX;
            ypos = e.pageY;
            $pic.css({'left': xpos, 'top': ypos});
        });
    });

    $pic.on('mouseup',function(){
        $pic.off('mousemove');
    });
});

デモ: http://jsfiddle.net/tYpKL/1/

.off()で設定されたメソッドのバインドを解除できる非常に便利なメソッドです.on()。

ライブラリを使用してこの機能を処理することを検討する必要があると思います。デモからわかるように、確かなユーザー エクスペリエンスにはほど遠いからです。:)

幸運を！

于 2013-10-13T04:18:31.170 に答える
0

もっと簡単な解決策があります。

HTML:

<html>
<head>
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
     <style>
         #pic1 { width: 100px; height: 100px; padding: 1px; }
     </style>
     <script>
         $(function() {
             $("#pic1").draggable();
         });
     </script>
</head>
<body>
    <div id="pic1" class="ui-widget-content">
        <img src="pic1.jpg" alt="Image 1">
    </div>
</body>
</html>

これは、ドラッグ可能な機能に使用される API のすべての詳細を説明する リンク ( http://api.jqueryui.com/draggable/ ) です。

于 2013-10-13T04:28:42.207 に答える
0

これを設定した方法は、mousemove トリガーがマウス ダウンにバインドされます。要素を削除するには、トリガーをバインド解除する ( http://api.jquery.com/unbind/ ) か、条件が満たされた場合にのみ要素の位置が更新されるように移動ハンドラーで条件を設定する必要があります。マウスのダウン/アップでその条件のオン/オフを切り替えてください。前者は単純に見えますが、jquery ui を使用する方が簡単かもしれません: http://jqueryui.com/draggable/

幸運を

于 2013-10-13T04:10:40.987 に答える