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

js实现的简单拖拽效果

WBOY
Release: 2016-06-07 11:42:42
Original
1106 people have browsed it

一直用到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元

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template