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. C#计算机性能参数

    Process proc = Process.GetCurrentProcess(); //string info = "内存:" + (Environment.WorkingSe ...

  2. SQL语句中的TOP(expression) [PERCENT] [WITH TIES] 用法

    TOP(expression) [PERCENT] [WITH TIES] expression : 指定返回行数的数值表达式.如果指定了PERCENT,则expression默认转换为FLOAT值, ...

  3. ABP框架入门踩坑-使用MySQL

    使用MySQL ABP踩坑记录-目录 起因 因为我自用的服务器只是腾讯云1核1G的学生机,不方便装SQL Server,所以转而MySQL. 这里使用的MySQL版本号为 8.0. 解决方案 删除Qi ...

  4. Open vSwitch 2.9.2 创建 RPM 安装包

    1.安装依赖环境 yum install gcc make python-devel openssl-devel graphviz autoconf automake rpm-build redhat ...

  5. A - 开门人和关门人(sort+结构体)

    点击打开链接 每天第一个到机房的人要把门打开,最后一个离开的人要把门关好.现有一堆杂乱的机房签  到.签离记录,请根据记录找出当天开门和关门的人.  Input 测试输入的第一行给出记录的总天数N ( ...

  6. Ultra-QuickSort (POJ 2299)树状数组+离散化

    题目链接 Description In this problem, you have to analyze a particular sorting algorithm. The algorithm ...

  7. 程序猿的日常——SpringMVC系统架构与流程回顾

    web开发经历了很漫长的时间,在国内也快有十几年的时间了.从最开始的进程级到现在的MVC经历了很多的改进和优化,本篇就主要复习了解下Spring MVC相关的知识. 发展历程 第一阶段 CGI进程响应 ...

  8. 匹配img标签的正则表达式

    $preg = '/<img.*?src=[\"|\']?(.*?)[\"|\']?\s.*?>/i';//匹配img标签的正则表达式 preg_match_all($ ...

  9. 一分钟搞懂 JavaScript this 指向问题

    关于Javascript的this指向问题,网络上有很多分析文章,写的很好,比如这里和这里 我这里做一个简单的总结. 箭头函数的 this 箭头函数内的this指向外层函数定义时所在的作用域.如果没有 ...

  10. jvm高级特性(6)(线程的种类，调度，状态，安全程度，实现安全的方法，同步种类，锁优化，锁种类）

    JVM高级特性与实践(十三):线程实现 与 Java线程调度 JVM高级特性与实践(十四):线程安全 与 锁优化 一. 线程的实现 线程其实是比进程更轻量级的调度执行单位. 线程的引入,可以把一个检查 ...