会移动的 DIV

本文介绍了一种使用JavaScript实现网页元素拖拽的方法。通过监听鼠标事件并更新元素位置,使页面中的元素可以被用户轻松地拖动到任意位置。文中详细解释了如何注册拖拽事件处理器及其实现细节。

<div id="movediv" style="width:250px;height:200px;border:1px #000 solid; position:absolute;left:400px;top:218px;">
<div id="movespan">朋友:用鼠标来拖走我吧!我在这里太久了!</div>
<div style="background:red; height:50px;"></div>
</div>
<script language="JavaScript" type="text/javascript">
var dragdrop={
registerDragdropHandler:function(handler,target,cursor){ // 注册鼠标移动的一些事件。
 var _IsMousedown=false,_ClickLeft=0,_ClickTop=0;
 var _hDom=this.get(handler);
 var _tDom=this.get(target);
 _hDom.style.cursor=cursor||"move";
 
  function startDrag(evt){ // 按下鼠标左键时的事件。
  evt=window.event||evt; // 获取当前事件对象。
  _IsMousedown=true; // 记录已经准备开始移动了。
  _ClickLeft=evt.clientX-parseInt(_tDom.style.left); // 记录当前坐标轴。
  _ClickTop=evt.clientY-parseInt(_tDom.style.top);
 }
    function doDrag(evt){ // 鼠标开始移动时的事件。
  evt=window.event||evt; // 获取当前事件对象。
  if(!_IsMousedown)return false; // 如果_IsMousedown不等于真了返回。
  _tDom.style.left=evt.clientX-_ClickLeft+"px"; // 把鼠标当前移动的位置赋值给div
  _tDom.style.top=evt.clientY-_ClickTop+"px"; // 当前位置减去开始位置就是层当前存放的位置。
 }
    function endDrag(){ // 释放鼠标左键时的事件。
  if(_IsMousedown){ // 如果_IsMousedown还为真那么就赋值为假。
  if(this.isIE) _tDom.releaseCapture(); //该函数从当前的窗口释放鼠标捕获,并恢复通常的鼠标输入处理。
  _IsMousedown=false;
  }
 }
    _hDom.onmousedown=startDrag; // 鼠标按下事件。
 document.onmouseup=endDrag; // 鼠标释放事件。
 document.onmousemove=doDrag; // 鼠标移动事件。
 _tDom.onselectstart=_tDom.oncontextmenu=function(){return false;}; // 禁止选择和右键菜单。
},
isIE:(navigator.appName=="Microsoft Internet Explorer"), // 判断是否为IE。
get:function(element){ // 通过一串字符返回一个对象。
 if(typeof(element) == "string"){
  return document.getElementById(element);
 }
 return element;
}
};
// 使用方式如下:
dragdrop.registerDragdropHandler("movespan","movediv");
</script>




<SCRIPT LANGUAGE="JavaScript">
<!--
var isCatchDiv = false;
var dragX = 0;
var dragY = 0;
var divMove;
function loadDiv(){
divMove=document.getElementById("sss");
divMove.style.top=document.body.scrollTop;
divMove.style.left=document.body.scrollLeft;
}
function hideDiv(){
divMove.style.visibility = "hidden";
}
function showDiv(){
loadDiv();
divMove.style.visibility = "visible";
}
function catchDiv(obj){
divMove = obj;
isCatchDiv = true;
var x=event.x+document.body.scrollLeft;
var y=event.y+document.body.scrollTop;
dragX=x-divMove.style.pixelLeft;
dragY=y-divMove.style.pixelTop;
divMove.setCapture();
document.onmousemove = moveDiv;
}
function releaseDiv(){
isCatchDiv = false;
divMove.releaseCapture();
document.onmousemove = null;
}
function moveDiv(){
if(isCatchDiv){
divMove.style.left = event.x+document.body.scrollLeft-dragX;
divMove.style.top = event.y+document.body.scrollTop-dragY;
}
}
window.onload = showDiv;
//-->
</SCRIPT>
<style type="text/css">
body{
font-size:12px;
font:Arial, Helvetica, sans-serif;
}
body a,a:link,a:visited {color:#000000;text-decoration:none}
#sss{
position:absolute;
width:300px;
height:200px;
background-color:#E1F0FF;
}
</style>
<div id="sss" style="cursor:move;" onMouseDown="catchDiv(this);" onMouseUp="releaseDiv()">
<a href="asdf">余弦函数</a>
</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值