如何在HTML 5中拖动光标图标？
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中拖动光标图标？的更多相关文章
- 如何在Qt Creator中导入图标资源
本文主要描述如何在Qt Creator中创建资源文件,并的打入导入图标文件. 查看图标资源文件时,可以在项目的工程文件上鼠标单击右键-Open With-资源编辑器,效果如下图所示: 在项目的工程文件 ...
- 雪碧图（background-position）、overflow、title中的小图标、光标、rgb 和opacity 与rgba
一.background-position 雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src url href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之 ...
- 如何在Windows Server 2008 R2中更改桌面图标
如何在Windows Server 2008 R2中更改桌面图标 Windows Server 2008 R2 已经在 MSDN 和 TechNet Plus 订阅上公布,gOxiA 在第一时间下载并 ...
- 如何在“代码”视图中工作并充分利用 Dreamweaver 的编码功能。如 Emmet 缩写
可通过多种方式在 Dreamweaver 中处理代码. 您可以使用“新建文档”对话框打开新的代码文件,然后开始键入您的代码. 在 Dreamweaver 中创建新的代码文件 键入时,会显示代码提示以帮 ...
- vc++ mfc中拖动效果的实现 借助于CImageList
拖动是界面编程频繁使用的一个效果,在windows系统下可谓大行其道.纵观时下的应用软件几乎各个都支持各种各样拖动的效果,windows7更是把拖动做到了极致.其实说起来拖动的实现也很简单,对于有句柄 ...
- 如何在window Form中使用Font Awesome？
随着技术的发展,web上以前的图片按钮现在逐步换成了图标字体,这些图标字体是矢量的,矢量图意味着每个图标都能在所有大小的屏幕上完美呈现,可以随时更改大小和颜色,而且不失真,真心给人一种“高大上”的感觉 ...
- 如何在移动端app中应用字体图标icon fonts （转）
原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...
- 如何在Google Map中处理大量标记(ASP.NET)(转)
如何在Google Map中处理大量标记(ASP.NET)(原创-翻译) Posted on 2010-07-29 22:04 Happy Coding 阅读(8827) 评论(8) 编辑 收藏 在你 ...
- 转：如何在 LoadRunner 脚本中做关联 (Correlation)
如何在 LoadRunner 脚本中做关联 (Correlation) 当录制脚本时,VuGen会拦截client端(浏览器)与server端(网站服务器)之间的对话,并且通通记录下来,产生脚本.在V ...
随机推荐
- 在Windows安装Reids 详解
今天安装了redis,记录点经验 因为Redis项目没有正式支持Windows. 但Microsoft开发和维护一个针对Windows 64版的redis. 下载地址在微软的GitHub上,地址:ht ...
- php CI框架log写入
1.首先,打开application下的config.php文件,将log配置打开如下 /* |---------------------------------------------------- ...
- Day 19 re 模块 random模块,正则表达式
https://www.cnblogs.com/Eva-J/p/7228075.html#_label10 findall search match方法 和 search相比 match自带 ^ se ...
- HTML 5 使用 FileReader、FormData实现文件上传
一.FileReader FileReader 对象允许Web应用程序异步读取存储在用户计算机中的文件(或缓冲区的原始数据),使用File或Blob对象指定要读取的文件或数据. 1.1 实例化 var ...
- UINavigationBar 的视觉效果
有很多属性可以决定导航栏的视觉效果,下面做一下总结 barStyle 属性 白底黑字 default 黑底白字 black blackOpaque 和 blackTranslucent 已被 Depr ...
- .Net - WebApi
WebApi C#进阶系列 - WebApi: WebApi 服务监控 + log4net:
- Python小白学习之路（二）—【Pycharm安装与配置】【创建项目】【运算符】【数据类型】
写在前面: 第二天的学习,感觉比昨天学习相对轻松一些,但是对于我这个编程语言功底很弱的人来说,还是稍稍微有些.....哈尔滨的天气一天天冷了下来,还飘着小雨,不过还是挺有意境的.充实而又忙碌的生活,让 ...
- #阿里云#云服务器搭建git服务器
前言:大家都知道,git是非常方便的版本控制工具,目前网上有很多免费的git仓库可以给我们使用,但是有些时候我们并不放心将我们的项目寄放在别人的服务器上,这个时候就需要自己搭建一个git服务器,十分的 ...
- IIS 8 配置错误
1) ProtocolException: The remote server returned an unexpected response: (405) Method Not Allowed Th ...
- Java—关于String的分析
一.两种赋值方式的比较 1.直接赋值法:String s1="abc"; 这种赋值方法用的最多,因为它可能不需要创建对象,或者只创建一次. 它首先会判断字符串常量池有没有存在字符串 ...