可拖动div - 下一站1

可拖动div

客户要求，页面有图片并且可以随意拖动

具体实现：

　　css：　

　　　　#div1{
　　　　　　width: 30px;
　　　　　　height: 30px;
　　　　　　/*一定要绝对定位*/
　　　　　　position: absolute;
　　　　　　/*初始位置*/
　　　　　　left: 5%;
　　　　}

　　js：

　　window.onload = function(){
　　　　var div1 = document.getElementById("div1");
　　　　div1.onmousedown = function(ev){
　　　　　　var oevent = ev || event;
　　　　　　var distanceX = oevent.clientX - div1.offsetLeft;
　　　　　　var distanceY = oevent.clientY - div1.offsetTop;
　　　　　　document.onmousemove = function(ev){
　　　　　　　　var oevent = ev || event;
　　　　　　　　div1.style.left = oevent.clientX - distanceX + \'px\';
　　　　　　　　div1.style.top = oevent.clientY - distanceY + \'px\';
　　　　　　};
　　　　　　document.onmouseup = function(){
　　　　　　　　document.onmousemove = null;
　　　　　　　　document.onmouseup = null;
　　　　　　};
　　　　};
　　};

　　jsp：

　　<div id="div1" class="first" style="left: 3%;bottom: 37%">
　　　　<img src="<%=path %>/frame/images/fxsj.png" style="width: 80px;height: 80px" class="fxsj" />
　　</div>