使用射流研究…实现的简单拖拽效果

前端开发的时候，有好多地方用到拖拽效果，当然http://jqueryui.com/draggable/是个不错的选择，但是我是个打破砂锅问到底的人，抽点时间用射流研究…小小的实现了类似的插件，话不多说。

first: html和钢性铸铁

复制代码代码如下： head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style * { margin : 0；padd : 0；} # div1 { position:绝对值宽度： 100像素；高度： 100像素；光标：移动；背景-颜色：红色；}/style/head body div id=' div 1 '/div/body/html

现在，先把主要算法实现一下：

复制代码代码如下：脚本窗口。onload=function(){//获取需要拖拽的div var div 1=文档。getelementbyid(' div 1 ')；//添加鼠标按下事件1区。onmousedown=function(evt){ var oEvent=evt | | event；//获取按下鼠标到左上角的距离var distanceX=oevent。clientx-div 1。offsetleftvar distanceY=oevent。clientx-div 1。偏移；//添加文件滑动时间文件。onmousemove=function(evt){ var oEvent=evt | | event；//重新计算差异的左上方值var left=oevent。client x-distanceX；var top=oevent。客户距离。//左侧当小于等于零时，设置为零防止差异拖出文件之外if(left=0){ left=0；} //当左边的超过文档右边界设置为右边界else if(left=document。文档元素。客户端宽度-div 1。offset witth){ left=document。文档元素。客户端宽度-div 1。偏移；} if(top=0){ top=0；} else if(top=document。文档元素。客户高度-1区。offset theight){ top=文档。文档元素。客户高度-1区。偏右；} //重新给差异赋值1区。风格。top=top“px”；1区。风格。left=left ' px} //添加鼠标抬起事件div1.onmouseup=function () { //清空事件document . onmousemove=nulldiv 1 . onmouseup=null } }/脚本

是啊，使用面向对象实现一下

复制代码代码如下：style * { margin:0划水：0;} # div1 { width: 100px高度： 100像素；背景-颜色：红色；} # div 2 {背景色：黄色；宽度宽度：100像素高度：100 px}/style div id=' div 1 '/div div id=' div 2 '/div

js Draggle类：

复制代码代码如下：函数拖动(id){ this。div=文档。getelementbyid(id)；如果(这个。{这个。div。风格。光标='移动'；这个。div。风格。位置='绝对'；}这个。DIsX=0；这个。disy=0；var _ this=这。div。onmousedown=function(evt){ _ this。get distance(evt)；文件。onmousemove=function(evt){ _ this。设定位置(evt)；} _这个。div。onmouseup=function(){ _ this。clear event()；} } }拖动。原型。get distance=function(evt){ var oEvent=evt | | event；这个。disx=oevent。client x-这个。div。offsetleft这个。disy=oevent。客户-这个。div。偏移；}拖动。原型。set position=function(evt){ var oEvent=evt | | event；var l=oevent。client x-这个。disxvar t=oevent。客户-这个。disyif(l=0){ l=0；} else if(l=document。文档元素。客户端宽度-这个。div。offsetwithts){ l=文档。文档元素。客户端宽度-这个。div。偏移；} if(t=0){ t=0；} else if(t=document。文档元素。客户身高-这个。div。offset theight){ t=文档。文档元素。客户身高-这个。div。偏右；}这个。div。风格。left=l ' px这个。div。风格。top=t ' px}拖动。原型。clearevent=function(){ this。div。onmouseup=nulldocument.onmousemove=null}

最后：最终实现：

复制代码代码如下：窗口。onload=function(){ new Drag(' div 1 ')；新拖动(“div 2”)；}

效果如下：

以上所述就是本文的全部内容了，希望能对大家更加熟练的掌握爪哇岛描述语言有所帮助。