Heim > php教程 > php手册 > js实现的简单拖拽效果

js实现的简单拖拽效果

WBOY
Freigeben: 2016-06-07 11:42:42
Original
1114 Leute haben es durchsucht

一直用到div的拖拽,从未自己实现过,今天看了一下,简单写一下,还是可以用的,主要分享给那些和我一样js薄弱的哥们,希望可以帮到你们!!!
<div></div> <br> <script><br /> function sDrag(id) {<br /> var id = id || &#039;sara&#039;;<br /> var m = document.getElementById(id);<br /> var flag = false;<br /> var sX = sY = 0;<br /> m.onmousedown = function(e) {<br /> if (e.button == 0) {<br /> flag = true;<br /> }<br /> sX = e.clientX - m.offsetLeft;<br /> sY = e.clientY - m.offsetTop;<br /> return false<br /> };<br /> document.onmousemove = function(e) {<br /> if (flag == true) {<br /> var x = e.clientX - sX;<br /> var y = e.clientY - sY;<br /> m.style.marginLeft = m.style.marginTop = 0;<br /> m.style.left = x + &#039;px&#039;;<br /> m.style.top = y + &#039;px&#039;;<br /> }<br /> return false;<br /> };<br /> document.onmouseup = function() {<br /> flag = false;<br /> return false;<br /> };<br /> }<br /> $(function() {<br /> sDrag(&#039;sara_org&#039;);<br /> })<br /> </script>

AD:真正免费,域名+虚机+企业邮箱=0元

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage