js实现的简单拖拽效果

jerry thinkphp 2015年11月19日 收藏
一直用到div的拖拽,从未自己实现过,今天看了一下,简单写一下,还是可以用的,主要分享给那些和我一样js薄弱的哥们,希望可以帮到你们!!!
  1. <div id="sara_org" style="width:100px;height:100px;background:#058ccc;position:absolute"></div>
  2. <script type="text/javascript">
  3.     function sDrag(id) {
  4.         var id = id || 'sara';
  5.         var m = document.getElementById(id);
  6.         var flag = false;
  7.         var sX = sY = 0;
  8.         m.onmousedown = function(e) {
  9.             if (e.button == 0) {
  10.                 flag = true;
  11.             }
  12.             sX = e.clientX - m.offsetLeft;
  13.             sY = e.clientY - m.offsetTop;
  14.             return false
  15.         };
  16.         document.onmousemove = function(e) {
  17.             if (flag == true) {
  18.                 var x = e.clientX - sX;
  19.                 var y = e.clientY - sY;
  20.                 m.style.marginLeft = m.style.marginTop = 0;
  21.                 m.style.left = x + 'px';
  22.                 m.style.top = y + 'px';
  23.             }
  24.             return false;
  25.         };
  26.         document.onmouseup = function() {
  27.             flag = false;
  28.             return false;
  29.         };
  30.     }
  31.     $(function() {
  32.         sDrag('sara_org');
  33.     })
  34. </script>