• 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;
        };
      ;
    };

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

    稍后更新....

  • 相关阅读:
    前端PHP入门-030-文件函数API
    前端PHP入门-029-文件操作-掌握级别
    前端PHP入门-028-文件操作-掌握级别
    前端PHP入门-027-数组常用函数-掌握级别
    SVM 支持向量机
    java 设计模式
    Linear Regreesion
    java 小结1(static ,final,泛型)
    概念介绍(机器学习)
    集成学习 概念介绍
  • 原文地址:https://www.cnblogs.com/tisikcci/p/5831828.html
Copyright © 2020-2023  润新知