jQuery UIのない​​Movable div

Question

私は、ユーザーがいくつかのドラッグ可能なポップアップを開くことを可能にするアプリケーションを持っています。私はjQuery UIを使用したくないので、これまでのコードは以下の通りです。ただし、divをドラッグすると、ポインタの中央に配置されますが、それはどのように行うべきではありません。

実際に、私が達成したいのは、上部のdiv（下の図を参照）をクリックしてウィンドウをドラッグするだけでよいということです。

function endMove() { 
    $(this).removeClass('movable'); 
} 
function startMove() { 
    $('.movable').mousemove(function(event) { 
     var thisX = event.pageX - $(this).width()/2, 
      thisY = event.pageY - $(this).height()/2; 

     $('.movable').offset({ 
      left: thisX, 
      top: thisY 
     }); 
    }); 
} 
$(document).ready(function() { 
    $("#containerDiv").click(function() { 
     $(this).addClass('movable'); 
     startMove(); 
    }).mouseup(function() { 
     $(this).removeClass('movable'); 
     endMove(); 
    }); 
}); 

Answer 1

あなたのdiv要素がレイアウトされている場合ので、私はあなたがヘッダに取り扱いクリックをバインドだけに運動を適用するには、以下の変更を行うことができると思うの内側にネストヘッダとコンテンツ領域を持つコンテナがありますコンテナ。また、あなたは、クリックの最初の位置を捕捉し、div要素をジャンプさせないようにするために、そこから始まるあなたの動きデルタを計算する必要があります。

var x = 0, y = 0; 
$(document).ready(function() { 
    $('.movable').live('mousemove', function(event) { 
    var deltaX = event.pageX - x, 
     deltaY = event.pageY - y; 

    x = event.pageX; 
    y = event.pageY; 

    var movable = $('.movable'); 
    movable.offset({ 
     left: movable.offset().left + deltaX, 
     top: movable.offset().top + deltaY 
    }); 
    }); 

    $("#headerDiv") 
    .mousedown(function(event) { 
     x = event.pageX; 
     y = event.pageY; 
     $(this).parent().addClass('movable'); 
    }) 
    .mouseup(function() { 
     $(this).parent().removeClass('movable'); 
    }); 
}); 

を、私は徹底的にこれをテストしていませんが、動作しているようです簡単なテストページでかなりうまくいきました。