javascript - ドラッグ可能な要素での奇妙なジャンプ

Question

楽しみのために、独自のドラッグ可能な div を作成しようとしましたが、1 つまたは 2 つの問題に遭遇しました。

最初の最も厄介な問題は、ユーザーがたまたまクリックした div 内のどこからでもドラッグできるようにすることです。これは、左上と右下の両方でうまく機能します。ただし、左下と右上では、一方をクリックすると他方にジャンプするように、フリップフロップします。私はこれに対する解決策を思い付くことができないようです。

 function DragMe(e) {
    var relativeXPosition = (e.pageX - this.offsetLeft);
    var relativeYPosition = (e.pageY - this.offsetTop);
    $(document).on('mousemove',function(e) {
       $('.move').offset({
           top: e.pageY - relativeXPosition,
           left: e.pageX - relativeYPosition,
        });
    });
};

$('.move').on('mousedown', DragMe);

$('.move').mouseup(function() {
    $(this).off('mousedown');
    $(document).off('mousemove');
    $('.move').on('mousedown', DragMe);
});

http://jsfiddle.net/VpM9j/

これは私がこれまでに持っているものです。また、複数の div でこの作業を開始する方法を誰かが知っていれば、素晴らしいでしょう。以前に試してみましたが、すべての div が一緒にスナップされたため、1 つが消えてしまいました。

これはおそらくjQuery UIで実行できることを理解していますが、私はまだ学んでいるので、もう少し難しくするために、今のところそれを避けたいと思っていました.