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. WireShark 查看UDP码流的丢包率

    1.用wireshark抓包之后,右击,点decode as,转化为RTP 2. 点show all streams 3.分析

  2. 解决oninput在输入中文时，会获取拼音的问题

    (1)起因:在今天做项目测试的时候发现的问题,在用微软自带的输入法的时候,输入中文,文本框会获得拼音 如图所示: (2)解决办法:经过一段时间的百度查找,最后通过这篇文章找到了解决的方法,这里给出网址 ...

  3. 机器学习、深度学习、和AI算法可以在网络安全中做什么？

    本文由  网易云发布. 本文作者:Alexander Polyakov,ERPScan的首席技术官和联合创始人.EAS-SEC总裁,SAP网络安全传播者. 现在已经出现了相当多的文章涉及机器学习及其保 ...

  4. Commons FileUpload文件上传组件

    Java实现的文件上传组件有好几种,其中最为“官方”的要数Apache Commons库中的FileUpload了吧. 页面 <form method="POST" enct ...

  5. Day4 作业

    a=[1,2,3,6,"dfs",100]s=a[-1:]print (s)答案:[100] s=a[-1:0:-1]print(s) 答案:[100, 'dfs', 6, 3, ...

  6. Android - "已安装了存在签名冲突的同名数据包"，解决方法！

    错误提示:已安装了存在签名冲突的同名数据包. 解决方法:打开Android Studio,打开logcat,用usb线连接你出错的手机,识别出手机之后,在你的项目后面,点击“run”按钮,随后AS会提 ...

  7. 二叉堆的实现(数组）——c++

    二叉堆的介绍 二叉堆是完全二元树或者是近似完全二元树,按照数据的排列方式可以分为两种:最大堆和最小堆.最大堆:父结点的键值总是大于或等于任何一个子节点的键值:最小堆:父结点的键值总是小于或等于任何一个 ...

  8. elasticsearch geo_point 地理位置过滤 按经度排序

    elasticsearch 支持强大的经纬度坐标过滤. 1.首先要建立坐标类型的字段'type' ='geo_point' es存储的值是这样的: "poi": [        ...

  9. day 55 linux 的常用命令

    前言 前面咱们已经成功安装了Linux系统--centos7,那么我们现在提好裤腰带,准备奔向Linux的大门.  Linux命令行的组成结构 [root@oldboy_python ~]# [roo ...

  10. 微信小程序开发笔记2，底部导航栏tablebar

    底部导航(要在app.js里面配置,也就是把导航的代码写到app.js) 官方文档说最少2个导航最多5个 , "tabBar": { "color": &quo ...