Javascript拖放的一些简单应用(逐行分析代码 让您轻松拖放)

今天我们来看看如何让拖动的对象不拖出div以及拖动的吸附功能。

上次我们说过，我们的拖拽不能被拖出可视区域。在此基础上，我们添加了父代的div，防止他拖出父代。原理和以前一样。保持简单。

Html代码：

div id=' div 2 ' div id=' div 1 '/div/div CSS代码：

style type=' text/CSS ' # div 1 { width : 100px；高度： 100像素；背景：红色；绝对位置：} # div2 { width: 400pxheight: 300px背景： # CCCCCC；相对位置：} /stylejavascript代码：

脚本类型='text/javascript' //拖放空div火狐低版本有bug window . onload=function(){ varo div=document . getelementbyid(' div 1 ')；var ODI v2=document . getelementbyid(' div 2 ')；var DIsX=0；var DIsy=0；odiv . onmousedown=function(ev){ var oEvent=ev | | event；disX=oevent . clientx-odiv . offsetleft；disY=oevent . clienty-odiv . offsettop；document . onmousemove=function(ev){ var oEvent=ev | | event；//存储div var odivleft=oevent . client x-disx的当前位置；var ODI vtop=oevent . clienty-disY；if(oDivLeft 0){ oDivLeft=0；} else if(oDivLeft ODI v2 . offset with-odiv . offset with){ oDivLeft=ODI v2 . offset with-odiv . offset with；} if(奥迪vTop 0) {奥迪vtop=0；} else if(ODI vtop ODI v2 . offset heat-odiv . offset heat){ ODI vtop=ODI v2 . offset heat-odiv . offset heat；} OdiV . style . left=OdiVleft ' px '；odiv . style . top=ODI vtop ' px '；};document . onmouseup=function(){ document . onmousemove=null；document.onmouseup=null};返回false//防止默认事件，解决火狐bug }；};/脚本渲染如下：

很简单。

下一步就是如何让他自动吸附。

其实大家都会经常用这个。比如ps里有一个小窗口拖到页面边缘，它会自动吸收。

这个拖放怎么会有这样的功能？

其实之前体育里也提到过，就像打车一样，你不能让司机准确停在那里，他一定是停在目的地附近。

那个程序也是一样的，只要在差不多的时候赋值就可以了。假设我拖动的物体离左边50px时，我认为它已经到左边了，然后直接赋值为0，它会自动吸收。

原理很简单。让我们看看代码是如何实现的。只需稍加修改。

脚本类型=' text/JavaScript '窗口。onload=function(){ var Odiv=document。getelementbyid(' div 1 ')；var ODI v2=文档。getelementbyid(' div 2 ')；var DIsX=0；var DIsy=0；奥迪夫。onmousedown=function(ev){ var oEvent=ev | | event；disX=oevent。clientx-odiv。offsetleftdisY=oevent。客户-奥迪夫。偏移；文件。onmousemove=function(ev){ var oEvent=ev | | event；var oDivLeft=oevent。客户端x-DIsX；var ODI vtop=oevent。client y-DIsy；//当左边的小于50 就自动归0 这样实现吸附if(oDivLeft 50){ oDivLeft=0；} else if(oDivLeft ODI v2。偏移为-odiv。偏移量为){ oDivLeft=ODI v2。偏移为-odiv。用.抵消；}如果(奥迪vTop(0){ 0奥迪vtop=0；} else if(ODI vtop ODI v2。偏移热量-odiv。偏置热){ ODI vtop=ODI v2。偏移热量-odiv。抵消热量；} OdiV。风格。left=OdiVleft ' px奥迪夫。风格。top=ODI vtop ' px};文件。onmouseup=function(){ document。onmousemove=nulldocument . onmouseup=null }；返回false }；};/script下一次会讲到高级应用，这些会更加的负责更加的有用。已完善我们的拖拽功能。

比如说图片的拖拽和文字的选中。比如说我们现在的这个拖拽页面上就只有一个div，在平时开发中是不会遇到的。

其实在页面上有东西的情况下，这个拖拽会出现什么问题？

下次会解决~尽请期待