正文
js图片拖放原理(很简单，不是框架，入门基础)
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
<html>
<meta>
<script src='jquery-1.8.3.min.js'></script>
<script>
/*
e.clientX:相对于客户区域的X坐标位置数值，不包括滚动条，就是正文区域
e.pageX:事件执行时获取鼠标的坐标，就是事件触发源的坐标
scrollLeft：返回或设置匹配元素的滚动条的水平位置
dom.offsetLeft：以自身坐标为基本的到父窗口的左边距，返回数值，
dom.top：以父对象为坐标基准，返回文本，后面带px这样的单位
*/
$(function(){
//当鼠标点击后执行
$("#dragDemo").mousedown(function(e){
var drag=false;
//获取起始位置
x=e.clientX-$(this).get(0).offsetLeft;
y=e.clientY-$(this).get(0).offsetTop;
//移动时改变
$(this).mousemove(function(e){
if(!drag){
$(this).css("position","absolute");
$(this).css("top",e.clientY-y+"px");
$(this).css("left",e.clientX-x+"px");
}
})
//鼠标松开时执行
$(this).mouseup(function(){
drag=true;
});
});
});
</script>
</meta>
<body>
<div id="dragDemo" style="border:1px solid #ccc;width:400px;height:200px;"></div>
</body>
</html>
有个问题，不是很清楚获取位置的方法，希望理解透切的程序员画张图出来，区分clientX,top,pageX,........等位置
