当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > JS实现拖曳任意对象

JS实现拖曳任意对象

2012/11/12 13:02:53作者:佚名来源:网络

移动端

【实例名称】

JS实现拖曳任意对象

【实例描述】

网页中可能经常遇到需要拖曳div或table的情况。本例学习一种方法,可实现对任意对象的拖曳。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <script LANGUAGE="JavaScript"> function DragEvent() {  //参数  //x,y 开始时的鼠标在对象中的偏移位置  //DargFlag 0:拖曳停止 1:拖曳开始  this.x = 0;  this.y = 0;  this.DragFlag=0; } var DragObject  = new DragEvent();

function DragMoveObject(obj) {  if(event.button == 1)    //如果按下的是鼠标左键  {   obj.style.position="absolute";  //设置对象为绝对定位模式   if(DragObject.DragFlag==0)   //拖曳开始   {     DragObject.DragFlag = 1;    DragObject.x = event.offsetX; //鼠标的x坐标    DragObject.y = event.offsetY; //鼠标的y坐标   }   obj.style.left = event.x-DragObject.x;  //保持鼠标在对象中的位置不变   obj.style.top = event.y-DragObject.y;  }  else  {   DragObject.DragFlag = 0;  //拖曳停止  } } </script> </head> <body> <textarea cols="30" rows="5" onmousedown="DragMoveObject(this);" > </textarea><br /> <input type=button value="拖拽"  onmousedown="DragMoveObject(this);" /> <input id="Button1" type="button" value="button"onmousedown="DragMoveObject(this);"  /> </body> </html>

【运行效果】

 拖曳任意对象运行效果

【难点剖析】

本例的重点是捕获鼠标的移动坐标,然后设置指定标签的坐标跟随鼠标的坐标。判断是否按下鼠标使用的条件是“event.button==1”。

【源码下载】

为了JS代码的准确性,请点击:JS实现拖曳任意对象 进行本实例源码下载 

标签: 对象  JS