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. Sql语法高级应用之七：如何在存储过程中使用事务

    普通事物: USE Wot_Inventory; GO BEGIN TRANSACTION tr; DECLARE @error INT; SET @error = 0; SELECT * FROM ...

  2. Restframework 权限permission 组件实例-2

    1.在视图类里添加权限组件 class BookView(APIView): authentication_classes = [UserAuth] permission_classes = [SVI ...

  3. FreePascal - CodeTyphon交叉编译，在一个操作系统生成各个操作系统可以运行的程序！

    致谢:[XE3]MN,让我加快完成了使用CodeTyphon进行交叉编译! CodeTyphon版本: 6.0 下载:http://www.pilotlogic.com/codetyphon/zips ...

  4. Manacher算法学习笔记

    前言 Manacher(也叫马拉车)是一种用于在线性时间内找出字符串中最长回文子串的算法 算法 一般的查找回文串的算法是枚举中心,然后往两侧拓展,看最多拓展出多远.最坏情况下$O(n^2)$ 然而Ma ...

  5. 分布式ehcache缓存

    今天在这里了记录一下学习ehcache分布式集群的过程. ehcache的三种最为常用集群方式,分别是 RMI.JGroups 以及 EhCache Server . 这里主要讲一下rmi方式. 1. ...

  6. Cassandra的数据模型

    Cassandra的数据模型可以理解为嵌套的Map,在Cassandra中数据类型主要有四种:Column,SuperColumn,ColumnFamily,Keyspace.下面分别介绍这几种类型. ...

  7. (转)十分钟了结MySQL information_schema

    十分钟了结MySQL information_schema  原文:http://www.cnblogs.com/shengdimaya/p/6920677.html information_sche ...

  8. 使用vue模拟购物车小球动画

    使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. Javascript中Date对象的格式化

    很多语言中都带有日期的格式化函数,而Javascript中却没有提供类似的方法.之前从某位前人的帖子中发现了下面的代码,感觉非常简洁,存留备用. /** * 时间对象的格式化; */ Date.pro ...

  10. Liunx安装Git

    环境:CentOS 6.5 min 安装git yum -y install gcc curl curl-devel zlib-devel openssl-devel perl cpio expat- ...