JQuery拖拽功能实现，div跟随鼠标移动，此方法在ifram中仍然有效（兼容IE）

<script type="text/javascript">
$(".aa").mousedown(function (e) {
//设置移动后的默认位置
var endx = 0;
var endy = 0;

//获取div的初始位置，要注意的是需要转整型，因为获取到值带px
var left = parseInt($(".aa").css("left"));
var top = parseInt($(".aa").css("top"));

//获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY
var downx = e.pageX;
var downy = e.pageY; //pageY的y要大写，必须大写！！

// 鼠标按下时给div挂事件
e.preventDefault()
$(".aa").bind("mousemove", function (es) {

//es.pageX,es.pageY:获取鼠标移动后的坐标
var endx = es.pageX - downx + left; //计算div的最终位置
var endy = es.pageY - downy + top;

//带上单位
$(".aa").css("left", endx + "px").css("top", endy + "px")
});
})

$(".aa").mouseup(function () {
//鼠标弹起时给div取消事件
$(".aa").unbind("mousemove")
})

</script>

下面是需要移动的div元素：

<div class="aa"></div>

 

图片拖拽时默认功能阻止：

在浏览器图片拖拽后自动打开新页面展示图片，如果只想拖拽位置，不像打开页面，添加e.preventDefault()方法组织浏览器拖拽功能