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>

  • 相关阅读:
    经典代码JSKeyword查看(M。。。$)的哦!
    django处理websocket
    产品所有者也应该是Scrum教练吗?
    google的javascript编码规范
    python 处理websocket
    [转] 虚拟座谈会:TDD有多美?
    python 数字相关
    google的python编码规范
    python 函数相关
    python推荐的模块结构
  • 原文地址:https://www.cnblogs.com/hyshi/p/10913552.html