jquery 和 javascript 实现层的拖动

一、首先是jquery

<!-- 层的拖动 -->
<SCRIPT type="text/javascript">

jQuery(function($){
dragStart("canDragDiv");
});


//所有函数的参数‘id’为可拖动层的id

var MouseX = 0; //记录鼠标x轴坐标
var MouseY = 0; //记录鼠标y轴坐标

//开始拖动
function dragStart(id){

//绑定鼠标滑过事件
$("#"+id).bind("mouseover",function(){

//绑定鼠标按下事件
$("#"+id).bind("mousedown",function(){
MouseX = 0;
MouseY = 0;
doDrag(id);
});
});

//绑定鼠标松开事件
$("#"+id).bind("mouseup",function(){
dragEnd(id);
});
}

//拖动
function doDrag(id){

//绑定鼠标移动事件
$("#"+id).bind("mousemove",function(){

//记录鼠标x、y轴坐标
var x = event.clientX;
var y = event.clientY;

//记录拖动层x、y轴坐标
var dragDivX = $("#"+id).offset().left;
var dragDivY = $("#"+id).offset().top;

//得到上次鼠标坐标
if(MouseX != 0) {
x = MouseX;
}
if(MouseY != 0) {
y = MouseY;
}

//记录本次鼠标坐标
MouseX = event.clientX;
MouseY = event.clientY;

//记录鼠标偏移量
var moveX = MouseX - x;
var moveY = MouseY - y;

//移动层
$("#"+id).css("left",parseFloat(dragDivX) + parseFloat(moveX));
$("#"+id).css("top",parseFloat(dragDivY) + parseFloat(moveY));
});
}

//结束拖动
function dragEnd(id){

//注销鼠标移动事件
$("#"+id).unbind("mousemove");
$("#"+id).bind("mouseout",function(){

//注销鼠标按下事件
$("#"+id).unbind("mousedown");
});
}
</SCRIPT>

二、接着是javascript（这个非原创）

<!-- 层的拖拽功能 -->
<script type="text/javascript">

function beginDrag(id,event)
{
elementToDrag = document.getElementById(id);
//该元素当前位于何处
//该元素的样式性质必须具有left和top css属性
//此外，我们假定他们用象素做单位
//var x=parseInt(elementToDrag.style.left);
//var y=parseInt(elementToDrag.style.top);

//计算一个点和鼠标点击之间的距离，下面的嵌套的moveHandler函数需要这些值
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);

//注册mousedown事件后发生的mousemove和mouseup事件的处理程序
//注意，它们被注册为文档的捕捉事件处理程序
//在鼠标按钮保持按下的状态的时候，这些事件处理程序保持活动的状态
//在按钮被释放的时候，它们被删除
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);

//我们已经处理了该事件，不要让别的元素看到它
event.cancelBubble=true;
event.returnValue=false;

function moveHandler(e)
{
//把元素移动到当前的鼠标位置
e=window.event;
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";

//不要让别的元素看到该事件
event.cancelBubble=true;
}

function upHandler(e)
{
//注销事件处理程序
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}

event.cancelBubble=true;
}

</script>