zoukankan      html  css  js  c++  java
  • 如何在HTML 5中拖动光标图标?

    window.app = {
      dragging: false,
      config: {
        canDrag: false,
        cursorOffsetX: null,
        cursorOffsetY: null
      },
      reset: function () {
        this.config.cursorOffsetX = null;
        this.config.cursorOffsetY = null;
      },
      start: function () {
        document.getElementById('target').addEventListener('mousedown', function (event) {
          console.log('+++++++++++++ dragstart');
          this.dragging = true;
          this.config.cursorOffsetX = event.offsetX;
          this.config.cursorOffsetY = event.offsetY;
          this.adjustPostion(event);
        }.bind(this));
        document.getElementById('target').addEventListener('mousemove', function (event) {
          if (this.dragging) {
            console.log('+++++++++++++ drag');
            event.target.style.cursor = 'move'; 
            this.adjustPostion(event);
          }
        }.bind(this));
        document.getElementById('target').addEventListener('mouseup', function (event) {
          console.log('+++++++++++++ dragend');
          this.dragging = false;
          event.target.style.cursor = 'pointer'; 
          this.reset();
        }.bind(this));
      },
      adjustPostion: function (event) {
        if (event.clientX <= 0 || event.clientY <= 0) {
          console.log('skipped');
          return;
        }
        var elm = document.getElementById('target');
        elm.style.left = (event.clientX - this.config.cursorOffsetX) + 'px';
        elm.style.top = (event.clientY - this.config.cursorOffsetY) + 'px';
        console.log(event.pageX);
        console.log(event.pageY);
      }
    
    };
    #target {
                position: absolute;
                top: 100px;
                left: 100px;
                width: 400px;
                height: 400px;
                background-color: red;
                -moz-user-select: none;
                -ms-user-select: none;
                -webkit-user-select: none;
                user-select: none;
            }
    
            #ui1 {
                position: absolute;
                top: 50px;
                left: 50px;
                width: 100px;
                height: 400px;
                background-color: blue;
                z-index: 100;
            }
    
            #ui2 {
                position: absolute;
                top: 50px;
                left: 550px;
                width: 100px;
                height: 400px;
                background-color: green;
                z-index: 100;
            }
    <!-- simulate -->
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>title</title>
    </head>
    <body onload="window.app.start();">
        <div id="ui1"></div>
        <div id="ui2"></div>
        <div id="target"></div>
    </body>
    </html>
  • 相关阅读:
    Oracle查看正在执行的存储过程的sid---转
    使用WITH子句重用子查询
    oracle解决显示数据的层次问题--实现数据缩进
    oracle9i、10g、11g区别 --转
    oracle10g安装在裸设备上
    在Linux系统上面创建使用裸设备的数据库
    监控Oracle数据库的常用shell脚本-转
    sql server使用维护计划定时备份完整数据库、差异数据库
    使用Advanced Installer14.3 简单打包windows窗体应用程序
    SVG Path标签 A 参数
  • 原文地址:https://www.cnblogs.com/BluceLee/p/9317701.html
Copyright © 2011-2022 走看看