鼠标事件

纯js实现

window.onload = function(){

var downFlag = false;

var container = document.getElementsByClassName('containerr');

container.onmoysedown = function(){

var e = ev || event;

downFlag = true;

offsetX = e.offsetX;

offsetY = e.offsetY;

}

container.ommouseup = fucntion(){

downFlag = false;

}

container.onmousemove = function(){

if(downFlag == false){

return;

}

var e = ev || event;

var xPos = e.clientX;

var yPos = e.clientY;

this.style.top = (yPos - offsetY) +'px';

this.style.left = (xPos - offsetX) + 'px';

}

}

页面样式中要绝对定位，然后用left和top来定位置之后通过移动获取top和left来进行控制。下面是百度图片鼠标与浏览器窗口的图例：

onmouseover：鼠标处于元素上方时触发的事件

onmouseout：鼠标移出元素时触发的事件

onmouseenter：鼠标进入的时候触发事件

onmouseleave：鼠标离开时触发的事件

注意：onmouseenter和onmouseleave 两个事件不会产生冒泡事件

********************************************************************************************************************************************************************

当然看完这些，知识是学到了，但是通常我们会用插件来完成这些功能

这里有一个很好的插件就是

<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

那么如何使用呢！百度也有相关的api文档，但是为了方便读，现在将具体用法书写进来

$( "#moveDiv" ).draggable();//id表示的是要拖动的最父级元素

哈哈是不是很简单，很神奇就一句话就结束了。