原理
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>