3

Twitterに似た画像クロッパーを構築しようとしています- http://jsfiddle.net/yarKr/1/。私がこだわっているのは、画像をドラッグする機能です。jquery ui に頼らずにこれを行う最良の方法は何ですか?

<div class="canvas">
    <span class="window"></span>
    <img src="http://www.dailystab.com/blog/wp-content/uploads/2009/03/katy-perry-esquire-4.jpg" class="draggable" />
</div>

.canvas div 内で画像をドラッグして移動できるようにしたいと考えています。

4

4 に答える 4

4

このようなものが動作します: jsFiddle

var TheDraggable = null;

$(document).ready(function () {

    $('.draggable').on({
        mousedown: function () { TheDraggable = $(this); },
        mouseup: function () { TheDraggable = null; }
    });

    $(document).mousemove(function (e) {

        if (TheDraggable) {

            TheDraggable.css({'top': e.pageY, 'left': e.pageX});
        }
    });
});

次に、CSS にこれを追加します。.draggable { position:absolute; }

これを書き直して、再配置になんらかの形のイージングを追加したり、カーソルを変更したり、画像上で最初のクリックが発生した場所に基づいてより正確な開始点を追加したりできますが、全体的には、それで始めることができます.

于 2013-07-21T19:58:38.793 に答える
1

ドラッグしながら位置を絶対にして、マウスの位置またはその近くに設定してはどうでしょうか。

于 2013-07-21T19:45:44.043 に答える