HTML +JS +JQuery 实现DIV的拖动效果

最近项目需要在twaver拓扑图面板上，单击link时弹出一个浮框，以展示该通道的详细信息，因信息量大，故自定义了一个class为dialog的div。想要实现该框的鼠标拖动效果，代码如下：（只展示了js部分）

//实现可拖动效果 start
$("#dialogHeader").mouseenter(function(e) {
    var obj = $('div.dialog');
    obj.css({
       'left': $('.dialog').offset().left ,
       'top': $('.dialog').offset().top
    });
});
$("#dialogHeader").mouseout(function() {
    var obj = $('div.dialog');
    //还原样式，并获取
    obj.css({
      'left': $('div.dialog').offset().left,
      'top': $('div.dialog').offset().top
    });
});

$('#dialogHeader').mousedown(
  function(event) {
     var isMove = true;
     var abs_x;
     var abs_y;
     abs_x = event.pageX - $('div.dialog').offset().left;
     abs_y= event.pageY - $('div.dialog').offset().top;
$(document).mousemove(function(event) {
       if(isMove) {
          var obj = $('.dialog');
	  obj.css({
	     'left': event.pageX - abs_x,
	     'top': event.pageY - abs_y
			                        
	  });
 $('#dialogHeader').css({'cursor':'move'}); 
 $('#titleTxt').css({'cursor':'text'});        
  }}).mouseup(
	function() {
	  isMove = false;
        }
   );
 });
				
//实现可拖动效果 end

下面是参考的一个demo 的完整代码，需要注意的是，Demo中margin不为零，故有margin的div可以参考。

    
        
        
        
        
    

    

        

            
按住此处移动当前div
            
这里是其它内容