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>

如何在HTML 5中拖动光标图标？的更多相关文章

  1. 如何在Qt Creator中导入图标资源

    本文主要描述如何在Qt Creator中创建资源文件,并的打入导入图标文件. 查看图标资源文件时,可以在项目的工程文件上鼠标单击右键-Open With-资源编辑器,效果如下图所示: 在项目的工程文件 ...

  2. 雪碧图（background-position）、overflow、title中的小图标、光标、rgb 和opacity 与rgba

    一.background-position     雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src   url    href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之 ...

  3. 如何在Windows Server 2008 R2中更改桌面图标

    如何在Windows Server 2008 R2中更改桌面图标 Windows Server 2008 R2 已经在 MSDN 和 TechNet Plus 订阅上公布,gOxiA 在第一时间下载并 ...

  4. 如何在“代码”视图中工作并充分利用 Dreamweaver 的编码功能。如 Emmet 缩写

    可通过多种方式在 Dreamweaver 中处理代码. 您可以使用“新建文档”对话框打开新的代码文件,然后开始键入您的代码. 在 Dreamweaver 中创建新的代码文件 键入时,会显示代码提示以帮 ...

  5. vc++ mfc中拖动效果的实现 借助于CImageList

    拖动是界面编程频繁使用的一个效果,在windows系统下可谓大行其道.纵观时下的应用软件几乎各个都支持各种各样拖动的效果,windows7更是把拖动做到了极致.其实说起来拖动的实现也很简单,对于有句柄 ...

  6. 如何在window Form中使用Font Awesome？

    随着技术的发展,web上以前的图片按钮现在逐步换成了图标字体,这些图标字体是矢量的,矢量图意味着每个图标都能在所有大小的屏幕上完美呈现,可以随时更改大小和颜色,而且不失真,真心给人一种“高大上”的感觉 ...

  7. 如何在移动端app中应用字体图标icon fonts （转）

    原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...

  8. 如何在Google Map中处理大量标记(ASP.NET)(转)

    如何在Google Map中处理大量标记(ASP.NET)(原创-翻译) Posted on 2010-07-29 22:04 Happy Coding 阅读(8827) 评论(8) 编辑 收藏 在你 ...

  9. 转：如何在 LoadRunner 脚本中做关联 (Correlation)

    如何在 LoadRunner 脚本中做关联 (Correlation) 当录制脚本时,VuGen会拦截client端(浏览器)与server端(网站服务器)之间的对话,并且通通记录下来,产生脚本.在V ...

随机推荐

  1. SL 的 DATAGRID中如何加入计算列？

    例如,我的数据库中实体表对应到EF中的实体类是 class { public int  F1; public int F2; } 我在服务端做domainservice 我在SL端使用wcf ria, ...

  2. BZOJ 1008--[HNOI2008]越狱（容斥&快速幂）

    1008: [HNOI2008]越狱 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 12593  Solved: 5439[Submit][Status ...

  3. jzoj3363

    JYY 来到了一个新的城市,为了和大家保持联系,第一件事就是办理新的手机号.JYY 对号码的要求很高,希望大家都能够顺畅地阅读手机号,因此 JYY 特别研究了地球人的电话号码阅读习惯,有如下重大发现 ...

  4. 基于unoconv的在线office预览

    这几天在搞在线文档预览,网上查了几种方案, 第一种:使用google的在线预览 -> 国内被Q,pass 第二种:使用第三方的,比如:永中dcs -> 要钱,pass 第三种:先转换为pd ...

  5. poj3026

    Borg Maze Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12952   Accepted: 4227 Descri ...

  6. 六，mysql优化——小知识点

    1,选择适当的字段类型,特别是主键 选择字段的一般原则是保小不保大,能占用字节小的字段就不用大字段.比如主键,建议使用自增类型,这样节省空间,空间就是效率!按4个字节和按32个字节定位一条记录,谁快谁 ...

  7. Elasticsearch系列(五)----JAVA客户端之TransportClient操作详解

    Elasticsearch JAVA操作有三种客户端: 1.TransportClient 2.JestClient 3.RestClient 还有种是2.3中有的NodeClient,在5.5.1中 ...

  8. 在 iOS 上编译 webkit 源码

    准备工作 买一台 mac 下载并安装 Xcode 下载源码 git clone git://git.webkit.org/WebKit.git WebKit 这个可能要耗费很久很久 编译源码 打开 X ...

  9. 移动端页面模板viewport

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta nam ...

  10. centos 7 初始化脚本

    #!/bin/bash # 时间: 2018-11-21 # 作者: HuYuan # 描述: CentOS 7 初始化脚本 # 加载配置文件 if [ -n "${1}" ];t ...