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>

  • 相关阅读:
    0114 Handler(一)
    0110Activity布局初步2+0111布局初步3
    0108 Activity的生命周期(二)+显示文本的几种方法+调用发送短信(Intent)
    消除超级连接虚线
    ASP.NET数据绑定(转载)
    ASP.NET实现数字签名(转载)
    datatable插入数据库(转载)
    JavaScript(转载)
    Jquery插件按开发学习笔记(一)
    js判断浏览器\屏幕分辨率(转载)
  • 原文地址:https://www.cnblogs.com/hyshi/p/10913552.html
Copyright © 2011-2022 走看看