对拖拽的高级应用，实现带框拖拽

        本文将对我上篇JavaScript拖拽进行添加特效，实现类似windows7系统那样带框的拖拽。如果有疑问的话先看我上一篇文章JavaScript实现拖拽。本文主要细讲如下实现这特效的细节。

        在JavaScript中我们要实现一个带框的拖拽的话，其实这个框本身也是一个div元素，而这个div元素是我们动态生成的。要想让这个框会动，首先我们对它的定位动手，在css中新设一个id，让position设为absolute。然后我们就在js中创造这个div元素，当鼠标进行点击的时候，这个通过document.createElement('div')来生成一个div元素，并且利用setAttribute或者直接用id给它赋予css样式。这个div框的长宽肯定要等于被点击对象的长宽，所以width和height要等于offsetWidth和offsetHeight，为了不让点击的时候div框突然间跑到页面左上角，我们要对它的top和left进行设置，让它的top和left等于被点击对象的offsetTop和offsetLeft，之后就appendChild加入到body中。

        当鼠标移动的时候，div框的left和top等于鼠标移动的坐标减去相对于距离被点击对象左边和右边的距离，当鼠标点击释放的时候，div框的left和top的值赋予给被点击对象的left和top，最后一定要用removeChild将div框给删除，如果不删除的话则会在页面中每次拖拽都会形成一个div框。下面代码展示：

	
		
		
		
	
	
		

		    	

		        		
拖拽
		        		
内容……