//点击拖拽div在document——（ $(document) ）上移动： 1定位（left ,top）2.根据鼠标在document上的动态坐标，得到div新的动态left、top的属性值
js：
<script src="../jquery-3.0.0.js"></script>
<script>
$(function(ev){ //加载完后执行：
$("div").mousedown( function(ev){
//鼠标点下的一刻 - 坐标-静态的值
var x= ev.pageX ;
var y =ev.pageY;
var w1= x- $("div").offset().left ;
var h1= y- $("div").offset().top ;
//注意：不是在div上拖拽—$("div").on("mousemove",fun)而是在文档里面拖拽——$(document).on("mousemove",fun)
$(document).on("mousemove",
function(ev){
//鼠标移动- 坐标-动态的值
x= ev.pageX ;
y =ev.pageY;
$("div").css("left",x-w1 +"px");
$("div").css("top",y-h1 +"px");
}
);
$(document).on("mouseup",
function(ev){
$(document).off();
}
);
}
);
});
</script>
html
<body> <div id="div1"></div> </body>
样式
*{ margin: 0; padding: 0;} #div1{ position: absolute; width: 100px; height: 100px; background: yellowgreen; }