调用此方法时请先加载jq插件;
function DivMove(obj,e){
$(obj).mousedown(function(e){$(obj).css("cursor","move");//改变鼠标指针样式
var x =parseInt(e.pageX - $(obj).offset().left); //获取div的当前X坐标
var y =parseInt(e.pageY - $(obj).offset().top); //获取div的当前X坐标
$(document).bind("mousemove",function(ev){//鼠标移动事件
var ox = Math.abs(ev.pageX - x);
var oy = Math.abs(ev.pageY-y);
$(obj).css({
left:ox+"px",//移动后的left的值
top:oy + "px" //移动后y的值
});
console.log(e.pageX,e.pageY);
});
})
$(document).mouseup(function(){
$(obj).css("cursor","default");//还原鼠标指针样式
$(this).unbind("mousemove");
});
}
样式
<style>
.right{
width: 300px;
height: 400px;
float: left;
overflow: hidden;
position: absolute;
top:10px;
left:75%;
background-color: #d1d1d1;
}
</style>
html代码
<div class="right" οnmοusedοwn="DivMove(this)">