JS 拖动效果

原理

   A（Xs,Ys）、B（Xd,Yd）

Xj = Xd - Xs

Yj = Yd - Ys

变量点

   （a,b）鼠标点

a - Xj = x

b - Yj = y

 

1)html 文件

   注意：position:fixed 是为了滚动固定

<div style="z-index: 300;position:fixed;left: 400px;top: 79px;border: 1px solid #ff3322;background-color: white;" id="uuuu">  JS拖动</div>

2）拖动JS

   

Zkj.drugWindow = function(jqueryFind){
	var d_init_x = 0;
	var d_init_y = 0;
	var dragging = false;
	$(jqueryFind).mousedown(function(e){
		dragging = true;
		d_init_x = e.pageX - this.offsetLeft;
		d_init_y = e.pageY - this.offsetTop;
		this.setCapture && this.setCapture();
		return false;
	});
	$(document).mousemove(function(e){
		if (dragging) {
			var e = e || window.event; 
			var oX = e.pageX - d_init_x;
			var oY = e.pageY - d_init_y;
			$(jqueryFind).css({"left":oX + "px", "top":oY + "px"}); 
			return false;
		}
	});
	$(document).mouseup(function(e){
	    dragging = false;
	});
};

 

3)定义拖动事件监听

<script type="text/javascript">
$(document).ready(function(){
	Zkj.drugWindow("#uuuu");
});
</script>