JQ 实现DIV可拖拽

//DIV可移动函数
function moveDiv(){
// 用来存放原始的X Y轴坐标
var XY = {};
$(".title").mousedown(function(e){
$(this).data("start",true);//控制鼠标移动事件是否触发
XY.X = e .clientX;//获取鼠标按下是的X轴
XY.Y = e .clientY;
XY.setY = e .offsetY;//获取鼠标在元素内的Y轴坐标
XY.oldX = parseInt($(".phone").css("right").split("px"));//获取DIV当前所在的屏幕位置
return false;
})
document.onmousemove = function(e){
/*鼠标移动事件触发时 存下当前鼠标所在的坐标 用按下时的坐标减当前的坐标加上DIV当前所在位置，即可完成移动  */
if($(".title").data("start")){ 
var xy ={
x:e .clientX,
y:e .clientY,
sety:e .offsetY
}
var newX = XY.oldX+(XY.X-xy.x);
$(".phone").css("right",newX+"px");
//设置div不超过屏幕大小
if(newX<28){
$(".phone").css("right","28px");
}else if(newX>($(window).width()*0.8)){
$(".phone").css("right",$(window).width()*0.8+"px");
}

}
}
$(".title").mouseup(function(e){
//鼠标松开 事件结束
$(this).data("start",false);
})
document.onmouseup = function(){
$(".title").data("start",false);
}
}

HTML

<div class="phone"><div class="title"></div></div>