js可以隨意拖拽的div的實現


最近花了點時間用純JS寫了一個掃雷程序,寫出來效果很差,自己長時間使用面向過程的方式編寫代碼,寫的程序到后面都亂了,有必要找時間好好的深入理解一下OOP了。有時間會把寫的東西拿上來。就當是留個紀念吧。打算用OOP重新寫個掃雷程序,希望令自己滿意。

——————————————碎碎念

記錄一個實現隨意拖拽div的實現方法,當作備忘吧,指不定什么時候用到了呢。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>divDrag</title>
    <style>
      #div1{
        width: 300px;
        height: 300px;
        background-color: #ccc;
        /*一定要絕對定位*/
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="div1"></div>
    <script src="drag.js"></script>
  </body>
</html>

 

*********************************************

//面向過程式寫法

window.onload = function(){
  var div1 = document.getElementById("div1");
  div1.onmousedown = function(ev){
    var oevent = ev || event;

    var distanceX = oevent.clientX - div1.offsetLeft;
    var distanceY = oevent.clientY - div1.offsetTop;

    document.onmousemove = function(ev){
      var oevent = ev || event;
      div1.style.left = oevent.clientX - distanceX + 'px';
      div1.style.top = oevent.clientY - distanceY + 'px'; 
    };
    document.onmouseup = function(){
      document.onmousemove = null;
      document.onmouseup = null;
    };
  ;
};

//所謂的面向對象實現(這就是面向對象嗎?感覺邏輯上也不咋的呀)

稍后更新....


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM