<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="李白，杜甫，李清照，柳宗元，李彦宏，马云">
<meta name="Keywords" content="桂林山水，唐诗宋词，风景，名胜，深圳，古剑奇谭，花千骨">
<meta name="Description" content="马云，马化腾，比尔盖茨，巴菲特，股票，百度，天津爆炸">
<title>拖拽事件</title>
<style>
div{width:100px;height:100px;background:red;position:absolute;}
</style>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js">
</script>
<script>
$(function(){
var disX=0;
var disY=0;
$('div').mousedown(function(ev){
//pageX() 属性是鼠标指针的位置，相对于文档的左边缘。
//offset():获取匹配元素在当前视口的相对偏移。返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
//position(): 获取匹配元素相对父元素的偏移。返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
//当在元素上放松鼠标按钮时，会发生 mouseup 事件。与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数。
disX=ev.pageX-$(this).offset().left; //-当前元素距离屏幕的距离
disY=ev.pageY-$(this).offset().top;
$(document).mousemove(function(ev){
$('div').css('left',ev.pageX-disX); //ev.pageX当前的鼠X坐标
$('div').css('top',ev.pageY-disY);
})
$(document).mouseup(function(){
$(document).off(); //鼠标松开取消上面的两个事件
})
return false; //组织默认事件+阻止冒泡的操作
})
})
</script>
</head>
<body>
<div></div>
</body>
</html> 最佳答案
