清除未知病毒有效率99% 五大核心技术

今天下午学习javascript时，根据学到的知识和搜索的资料，自己完成了一个基于javascript的拖放应用程序。

包含三个文件：1、drag.css；2、drag.js；3、index.html

主要是drag.js文件，现在谈一谈自己完成的过程：先找到图片在它所包含的盒子里的位置x1，然后找出鼠标相对于客户端窗口的位置x2，用x1-x2得到图片对象相对于窗口的位置x3；当鼠标点击图片拖动的时候捕获鼠标移动的位置（就是现在鼠标相对于客户端窗口的水平和垂直距离）x4，再用x4-x3就得到图片当前的移动的距离。

//<![CDATA[
var dragObj = null ;    //拖放的对象
var mouseOffset = null ;    //拖放对象的偏移位置

//捕获鼠标的事件
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;

//设置x,y
function MousePoint(x,y){
this.x = x;
this.y = y;
}
//创建鼠标位置
function mousePosition(evnt){
var x= parseInt(evnt.clientX);
var y= parseInt(evnt.clientY);
return new MousePoint(x,y);
}
//获取对象的页面偏移量
function getMouseOffset(target,evnt){
var theEvent = evnt ? evnt : window.event;
var mousePos = mousePosition(theEvent);

var x = mousePos.x - target.offsetLeft;
var y = mousePos.y - target.offsetTop;
return new MousePoint(x,y);
}

//对象拖动时捕获鼠标位置
function mouseMove(evnt){
var theEvent = evnt ? evnt : window.event;
var mousePos = mousePosition(theEvent);

if(dragObj){
dragObj.style.position = 'absolute';

dragObj.style.top = mousePos.y - mouseOffset.y + 'px';
dragObj.style.left = mousePos.x - mouseOffset.x + 'px';

}
}

//停止拖放
function mouseUp(){
dragObj = null;
}

//可以拖放的对象
function makeDrag(item){
item = document.getElementById(item);
item.onmousedown = function(evnt){
dragObj = this;
mouseOffset = getMouseOffset(this,evnt);
return false;
}
}
//载入对象
window.onload = function(){
makeDrag('img1');
}
//]]>

效果图：