使用JQuery完成拖拽div功能

drag jquery 拖拽 D3数据可视化QQ群：240256541

body定义我们要拖拽的容器并定义样式类

<div class="drag" style="display: block; width: 300px; height: 200px"></div>

css中定义div样式

.drag{ 
    position:absolute; 
    background:#0000CC; 
    top:100px;left:200px; 
    padding:0; 
}

javascript添加操作

$(document).ready(function(){
	var move=false;//移动标记 
	var _x,_y;//鼠标离控件左上角的相对位置 
	$(".drag").mousedown(function(e){ 
		move=true; 
		_x=e.pageX-parseInt($(".drag").css("left")); 
		_y=e.pageY-parseInt($(".drag").css("top")); 
	}); 
	$(document).mousemove(function(e){ 
		if(move){ 
			var x=e.pageX-_x;//控件左上角到屏幕左上角的相对位置 
			var y=e.pageY-_y; 
			$(".drag").css({"top":y,"left":x}); 
        } 
    }).mouseup(function(){ 
        move=false;
    }); 
}); 

不要忘记在文档前面先导入jquery脚本