zoukankan      html  css  js  c++  java
  • JavaScript拖拽原理的实现

    实现拖拽的基本思路 

    拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的top和left的改变。当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的。

    根据以上的基本原理,我写出了下面的基本思路。感觉代码还是比较短的,

    1. view plaincopy to clipboardprint  
    2. 拖拽状态 = 0鼠标在元素上按下的时候{     
    3.     拖拽状态 = 1     
    4.     记录下鼠标的x和y坐标     
    5.     记录下元素的x和y坐标     
    6.    }     
    7.    鼠标在元素上移动的时候{     
    8.     如果拖拽状态是0就什么也不做。     
    9.     如果拖拽状态是1,那么     
    10.     元素y = 现在鼠标y - 原来鼠标y + 原来元素y     
    11.     元素x = 现在鼠标x - 原来鼠标x + 原来元素x     
    12.    }     
    13.    鼠标在任何时候放开的时候{     
    14.     拖拽状态 = 0     
    15.    }     

    将以上思路翻译成JS代码就可以实现拖拽的效果了。  

    JavaScript代码  

    1. view plaincopy to clipboardprint  
    2. <mce:script type="text/javascript"><!--     
    3.    var dragging = false;     
    4.    var test;     
    5.    var mouseY;     
    6.    var mouseX;     
    7.    window.onload = function(){     
    8.     test = document.getElementById("test");     
    9.     test.onmousedown = down;     
    10.     test.onmousemove = move;     
    11.     document.onmouseup = up;     
    12.     test.style.position = "relative";     
    13.     test.style.top = "0px";     
    14.     test.style.left = "0px";     
    15.    }     
    16.    function down(event)     
    17.    {     
    18.     event = event || window.event;      
    19.     dragging = true;      
    20.     mouseX = parseInt(event.clientX);     
    21.     mouseY = parseInt(event.clientY);     
    22.     objY = parseInt(test.style.top);     
    23.     objX = parseInt(test.style.left);     
    24.    }     
    25.    function move(event){     
    26.     event = event || window.event;      
    27.     if(dragging == true){     
    28.         var x,y;     
    29.         y = event.clientY - mouseY + objY;     
    30.         x = event.clientX - mouseX + objX;     
    31.         test.style.top = y + "px";     
    32.         test.style.left = x + "px";     
    33.     }     
    34.    }     
    35.    function up(){     
    36.     dragging = false;     
    37.    }     
    38.    // --></mce:script>    

    HTML代码 

    1. view plaincopy to clipboardprint  
    2. <div id="test" style="border:1px solid; 400px; background:#CCCCCC;">     
    3.      <p>我是拖拽示例DIV。</p>     
    4.      <p>可以试验一下效果。</p>     
    5.    </div>     

     演示代码

    1. + expand sourceview plaincopy to clipboardprint 

    缺点与待完善之处  

    这个拖拽的例子还相当不完善,不过已经实现了拖拽最根本的核心。想到的待完善部分有下面几点:获得元素的x与y坐标的方法在本文里简化掉了;本文只让一个固定的元素具有了拖拽功能,灵活性太差;鼠标样式没有变换;快速的“乱甩拖拽”有一定概率出现问题。其中最后一个问题暂时不知道怎么解决,前面三个比较好办。

  • 相关阅读:
    RE
    【LeetCode】198. House Robber
    【LeetCode】053. Maximum Subarray
    【LeetCode】152. Maximum Product Subarray
    【LeetCode】238.Product of Array Except Self
    【LeetCode】042 Trapping Rain Water
    【LeetCode】011 Container With Most Water
    【LeetCode】004. Median of Two Sorted Arrays
    【LeetCode】454 4Sum II
    【LeetCode】259 3Sum Smaller
  • 原文地址:https://www.cnblogs.com/lpw94/p/4976781.html
Copyright © 2011-2022 走看看