zoukankan      html  css  js  c++  java
  • 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;
        };
      ;
    };

    //所谓的面向对象实现(这就是面向对象吗?感觉逻辑上也不咋的呀)

    稍后更新....

  • 相关阅读:
    P1121 环状最大两段子段和
    无题
    cdoj 1485 柱爷搞子串 sam treap
    自然数幂和
    Gym 100341C AVL Trees NTT
    线性筛分解质因子
    codeforces 366 Ant Man dp
    UVALive 6914 Maze Mayhem 轮廓线dp
    hdu 5790 Prefix 字典树 主席树
    莫比乌斯反演个人小结
  • 原文地址:https://www.cnblogs.com/tisikcci/p/5831828.html
Copyright © 2011-2022 走看看