【拖拽系列】之一

　　对于特效，这个听过很多见过很多也写过很多，在刚开始学习js的时候，发现了很多好玩的东西，相册的轮播，各种下雨，星空的特效着实吸引了我，后来慢慢的不在关注这些，开始研究js最底层的东西，这些苦涩的底层让我对js有了一个深层次的认知，让我感觉到仿佛从喧嚣的城市回到了静谧的山村，我喜欢这种感觉，眼观不再局限于一些局部，而是感官四面八方，慢慢的探索，悟到了些许的真谛，开始努力去追求完美，什么才是最好的，怎么做才是最好的。

　　在这里记录一些自己开始时候学习的片段，不再着眼于结果，而是层次，结构。

　　第一次使用拖拽效果的时候，心中已经有了一个架构，跟写第一个进度条的效果一样，自己设计的模型，很快就通过简单的代码实现了，这不是想当然的事情，这是一种基础累计的过程。慢慢习惯了看见新的事物自己试着去模仿出来，对自己想做的效果，更不用说了，写这些需要的不是倚天屠龙，而是简简单单的刻苦的修炼。

现在我把这个过程叫做忆往昔

　　拖拽：

　　　　或许有些人刚开始使用这个效果的时候觉得很神奇，不同于桌面应用程序，桌面应用程序可以自由的进行拖拽，在web实现中，试着观察桌面应用程序在window窗口中实现的机制很容易就会想到。

　　简单原理：

　　默认状态：对对象进行初始化

　　　　　　state=false;

　　鼠标按下：获取当前对象的坐标，鼠标的坐标，同时激活改变默认状态

　　　　　　　　当前对象的坐标：objx=obj.style.left

　　　　　　　　　　　　　　　　objy=obj.style.top

　　　　　　　　鼠标的坐标：　　mousex=event.clientX

　　　　　　　　　　　　　　　　mousey=event.clienty

　　激活默认状态： state=true

　　鼠标移动：获取此时鼠标的坐标；对坐标进行解析，计算当前对象的坐标

　　　　　　　　此时鼠标的坐标：nowx=event.clientX

　　　　　　　　　　　　　　　　nowy=event.clientY

　　　　　　　　当前对象的坐标：top=nowx-mousex+objx

　　　　　　　　　　　　　　　　left=nowy-mousey+objy

　　鼠标移出时：重置状态为默认状态

　　原理着实简单，就可以作出一个简单的拖拽的效果

　　代码实现：

　　HTML代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
  <script type="text/javascript" src="drag1.js"></script>
  <style type="text/css">
	#test{
		width:150px;
		height:100px;
		background-color:#cc6633;
		border:4px red solid;
		text-align:center;
		font-size:2em}
  </style>
 </head>
 <body>
  <div >
	<p>this is a  gril</p>
  </div>
 </body>
</html>

javascript代码

var drag=false;
var test;
var mousex,mousey;
var objx,objy;
window.onload=start;
function start(){
    test=document.getElementById("test");
	test.style.position="relative";
	test.style.top= "0px";
	test.style.left= "0px";
	test.onmousedown=down;
	test.onmousemove=move;
	test.onmouseup=up;
}
function down(event)
{
	drag=true;
	var event=event || window.event;
	mousex=event.clientX;
	mousey=event.clientY;
	objy=parseInt(test.style.top);
	objx=parseInt(test.style.left);
}
function move(event){
	if(drag)
	{
		var event = event || window.event;
		var nowx = event.clientX - mousex + objx;
		var nowy = event.clientY - mousey + objy;
		test.style.left = nowx + "px";
		test.style.top = nowy + "px";
	}
}
function up()
{
	drag=false;
}