JS拖拽组件学习使用

射流研究…代码需要常写，不然容易生疏，最近虽然一直在看射流研究…的原型，行为委托等知识点，但是动手写代码的量略有减少。本文与大家分享一个拖拽组件，供大家参考，具体内容如下

首先，看一下拖拽的原理。

被拖拽元素位置的变化，左侧值的变化其实就是鼠标位置水平方向的变化值，e.clientX -鼠标左键按下时e.clientX。顶端值的变化其实就是鼠标位置竖直方向的变化值，e.clientY -鼠标左键按下时e.clientY。另外就是设置拖拽的范围，上下左右不得超过父元素所在的区域。

函数拖动(配置){这个。movetarget=文档。getelementbyid(配置。id)；if(配置。parentid){这个。targetparent=document。getelementbyid(配置。parent id)；这个。max _ left=这个。targetparent。客户端宽度-这个。移动目标。用.抵消；这个。max _ top=这个。targetparent。客户身高-这个。移动目标。偏移光线；} else { console。日志(文档。文档元素。客户端高度' | | '这个。移动目标。右边)这个。max _ left=文档。文档元素。客户端宽度-这个。移动目标。offsetwidth-parsent(这。getstyle(文档。body，‘border-width’)；这个。max _ top=文档。文档元素。客户身高-这个。移动目标。偏移右解析器(这个。getstyle(文档。body，‘border-width’)；} this.lock=true}拖动。原型。getstyle=function(element，attr){ if(element。currentstyle){ return元素。current style[attr]；} else {返回窗口。getcomputed style(元素，null ).getPropertyValue(attr)} }拖动。原型。MoDown=函数(e){ e=e | | window。事件；这个。客户x=e .客户x；这个。clienty=e . clienty//鼠标按下时，拖动的左边的值，顶部值（写在风格中或者是钢性铸铁中)这个。startleft=parsent(这。移动目标。风格。左| |这个。getstyle(这个。movetarget，' left ')；这个。starttop=parsent(这。移动目标。风格。top | |这个。getstyle(这个。移动目标，“顶部”)；//鼠标按下时，鼠标的clientX值嘿，客户值这个。StartClientX=e . ClientX这个。startclienty=e . clientythis . lock=false }；拖拉。原型。Momove=函数(e){ e=e | | window。事件；如果(e。哪个！=1){这个。lock=true} if(！这个。lock){ var real left=this。start left e . client x-这个。startclientx//实际的移动范围var realTop=this。starttop e . clienty这个。startclienty//rightLeft，rightTop//左侧，顶部取值（在可移动范围内)var right left=real left这个。max _ left？this.max_left : (realLeft 0？实左： 0)；var右上方=真正的上方。max _ top？this.max_top : (realTop 0？realTop : 0)；这个。移动目标。风格。left=right left ' px这个。移动目标。风格。top=右上' px；} };拖拉。原型。MoUP=函数(e){ e=e | | window。事件；this . lock=true }；拖拉。原型。startdrag=function(){ console。记录这个。移动目标。onmousedown=function(e){ this。MoDown(e)} .绑定（这个);这个。移动目标。onmousemove=function(e){ this。Momove(e)} .绑定（这个);这个。移动目标。onmouseup=function(e){ this。MoUP(e)} .绑定（这个);}说明：moDown响应鼠标左键按下操作莫莫弗响应鼠标移动操作，MoUp响应鼠标抬起操作。

在moMove中增加了哪个判断，e . what==表示鼠标左键按下，这是为了解决，鼠标移除可拖拽范围外，再移回时，无需按下左键，被拖拽元素就会跟着动的Bug。

使用说明：

在使用时，被拖拽元素的编号是必须参数，父元素的id(即可以拖拽移动的范围)为可选参数，如果不传递父元素的id，则默认使用documentElement为可拖拽的范围。

如果传递父元素，请别忘了将父元素的定位设为位置：相对或绝对位置：

在使用时，先引入拖拽插件的射流研究…文件。

！doctype html html lang=' en ' head meta charset=' UTF-8 ' meta name=' Generator ' content=' EditPlus ' meta name=' Author ' content='刘艳元名称='关键字'内容='关键字元名称='描述'内容='描述标题文档/标题样式* {边距33600 pxpadding:0px } #内容{宽度：600像素高度：500 px位置：相对；border:5px纯绿色；} #拖动{ position:absolute绝对值高度：100 px宽度宽度：100 pxtop :50 pxl eft :0 px背景：粉红色；光标：指针指针；}/style/head body div id=' content ' div id=' Drag '/div/div/body/html脚本src=' URL/Drag。js '/脚本脚本窗口。onload=function(){ var Drag=new Drag({ id : ' Drag '，parentid : ' content ' })；拖拉。startDraG()；}/脚本如果您想在整个窗口中拖拽，请不要设置被拖拽元素的父元素的定位，即，使其相对身体定位。

如果您需要对身体定位，但是又需要设置其父元素的位置为非静态的，那么您可以对本插件进行扩展。

希望本文对大家学习爪哇岛描述语言程序设计有所帮助。