zoukankan      html  css  js  c++  java
  • JavaScript 面向对象的拖拽

    一、body

    <div id="box"></div>

    二、css

    <style>

    #box {

      position: abaolute;

      top: 0;

      left: 0;

       100px;

      height: 100px;

    }

    </style>

    三、JavaScript

    <script>

      class Drag{

        constructor(el) {

          this.el = el;

          el.startOffset = null;

          el.startPoint = null;

          let move = (e) => {

            this.move(e);

          }

          let end = (e)=>{

            document.removeEventListener('mousemove', move);

            document.removeEventListener('mouseup', end);

          }

          el.addEventListener('mousedown', (e)=>{

            this.start(e);

            document.addEventListener('mousemove', move);

            document.addEventListener('mouseup', end);

          })

        }

        start(e) {

          let {el} = this;

          this.startOffset = {

            x: el.offsetLeft,

            y: el.offsetTop

          }

          this.startPoint = {

            x: e.clientX,

            y: e.clientY

          }

        }

        move(e) {

          let {el, startOffset, startPoint} = this;

          let nowPoint = {

            x: e.clientX,

            y: e.clientY

          }

          let dis = {

            x: nowPoint.x - startPoint.x,

            y: nowPoint.y - startPoint.y

          }

          el.style.left = startOffset.x + dis.x + 'px';

          el.style.top =startOffset.y + dis.y + 'px';

        }

      }

      let box = document.querySelector('#box');

      let drag = new Drag(box);

    </script>

  • 相关阅读:
    模板引擎使用详解:包含公共模板
    ThinkPHP3.2 常量参考
    ThinkPHP的全部配置选项
    报错compile_str() flow.php on line 375的解决方法
    mysql如何更新一个表中的某个字段值等于另一个表的某个字段值
    Mac下新安装的MySQL无法登陆root用户解决方法
    IOS-第三方开源库
    IOS-每个程序员的编程之路上都应该看这11本书
    IOS-程序员和设计师必备的20个CSS工具
    IOS-2016年最好的15个Web设计和开发工具
  • 原文地址:https://www.cnblogs.com/hyshi/p/10913552.html
Copyright © 2011-2022 走看看