Heim  >  Artikel  >  Web-Frontend  >  javascript 鼠标拖动图标技术_javascript技巧

javascript 鼠标拖动图标技术_javascript技巧

WBOY
WBOYOriginal
2016-05-16 18:35:001007Durchsuche

这个例子简单讲就是鼠标拖动图标到它任意想去的地方
代码

复制代码 代码如下:



<script> <BR>var bb = document.getElementById("block"); <BR>bb.onmousedown = function(){ <BR>//获取鼠标当前坐标 <BR>var pageX = event.clientX; <BR>var pageY = event.clientY; <BR>//获取block的坐标,左边界和上边界 <BR>var offX = parseInt(this.style.left)||0; <BR>var offY = parseInt(this.style.top)||0; <BR>//计算出鼠标坐标相对于block坐标的间距 <BR>var offLX = pageX-offX; <BR>var offLY = pageY-offY; <BR>if(!document.onmousemove){ <BR>document.onmousemove = function(){ <BR>bb.style.left=event.clientX-offLX; //设置block的X坐标 <BR>bb.style.top=event.clientY-offLY; //设置block的Y坐标 <BR>} <BR>} <BR>} <BR>document.onmouseup = function(){document.onmousemove = null;} //鼠标弹起 <BR></script>

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn