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学习笔记2

    2018.10.16:周二 --进阶   --别名 SELECT StuName,StuNum+','+StuClass+','+StuGender+','+StuPhone AS 信息 FROM S ...

  2. C# DataTable导出EXCEL后身份证、银行卡号等长数字信息显示乱码解决

    在DataTable导出EXCEL后发现有些格式显示有问题,比如身份证.银行卡号等大于11位的数字显示为科学计数法.13681-1等 带中划线的两段数字显示为日期格式等. 处理方法如下: public ...

  3. 838. Push Dominoes

    There are N dominoes in a line, and we place each domino vertically upright. In the beginning, we si ...

  4. 前端入门html（标签介绍）

    day47 参考:https://www.cnblogs.com/liwenzhou/p/7988087.html # web本质 示例 import socket sk = socket.socke ...

  5. easyUI取消选中的所有行

    在datagrid选择选中行进行展示后,再返回这个datagrid重新加载数据, 原来选中的数据还是保持选中状态.执行以下的方法还是如此,如图. $("#Table").datag ...

  6. Java并发编程之final域的内存语义

    一.final域的重排序规则 对于final域,编译器和处理器要遵循两个重拍序规则: 1.在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用变量,这两个操作之间不能重排序 ...

  7. AngularJS入门之动画

    AngularJS中ngAnimate模块支持动画效果,但是ngAnimate模块并未包含在AngularJS核心库中,因此需要使用ngAnimate需要在定义Module时声明对其的引用. Angu ...

  8. sqlserver监控阻塞（死锁）具体情况(转)

    公司sqlserver的监控系统主要是采用zabbix监控,但是zabbix的监控只能通过性能计数器给出报警,而无法给出具体的阻塞情况,比如阻塞会话.语句.时间等,所以需要配合sqlserver的一些 ...

  9. (转)pt-online-schema-change在线修改表结构

    原文:http://www.ywnds.com/?p=4442 一.背景 MySQL大字段的DDL操作:加减字段.索引.修改字段属性等,在5.1之前都是非常耗时耗力的,特别是会对MySQL服务产生影响 ...

  10. docker registry push错误“server gave HTTP response to HTTPS client”

    系统环境:centos7 docker版本: 1.12.3(注意版本,可能存在不同版本设置不同的情况) docker registry版本:2.4.1 问题: 成功安装docker registry, ...