当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

JS完成拖曳任意对象

JS完成拖曳任意对象

更新时间:2023-06-13 文章作者:未知 信息来源:网络 阅读次数:

编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

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实现拖曳任意对象 进行本实例源码下载 


使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行

网站地图xml | 网站地图html