写一个兼容性比较好的拖拽DEMO
写一个兼容性比较好的拖拽DEMO
思路
- div盒子
- 鼠标按下事件onmousedown
- 鼠标移动事件onmousemove,获得鼠标的坐标,将div移动至鼠标的当前坐标
- 鼠标抬起事件omouseup,清除鼠标移动事件和鼠标抬起事件
布局和代码
<style>
#div1 {
background: rgb(40,40,40);
width: 100px;
height: 100px;
position: absolute;
color: #fff;
}
</style>
<body>
实例文字实例文字实例文字实例文字
<div id="div1">实例文字</div>
实例文字实例文字实例文字实例文字
<script>
window.onload = function() {
drag("div1");
}
function drag(id) {
var oDiv = document.getElementById(id);
oDiv.onmousedown = function(ev) {
var oEvent = event || ev;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
oDiv.style.cursor = "move";
// for IE
if (oDiv.setCapture) {
oDiv.onmousemove = fnMove;
oDiv.onmouseup = fnUp;
oDiv.setCapture();
} else {
document.onmousemove = fnMove;
document.onmouseup = fnUp;
}
function fnMove(ev) {
var oEvent = event || ev;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
// 磁性吸附
if (l < 50) {
l = 0;
} else if (l > document.documentElement.clientWidth - oDiv.offsetWidth-50) {
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if (t < 50) {
t = 0;
} else if (t > document.documentElement.clientHeight - oDiv.offsetHeight-50) {
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
};
function fnUp() {
this.onmousemove = null;
this.onmouseup = null;
if (this.releaseCapture) {
this.releaseCapture();
}
}
return false; // 阻止文字选中
}
}
</script>
DEBUG
- 当页面中有其他元素的时候,鼠标拖拽时,会默认地去选中其他的诸如文字之类的东西,布局中的“实例文字”就是为此准备的。我们可以加入
return false
来解决掉很多浏览器默认事件,在这里就有一个很好的应用 - 微软的IE总是有自己的一套,这给js兼容带来了很大的麻烦,上述的bug解决方法在IE6下根本无效,因此这里引入了IE特有的
setCapture()
,IE中,假设id为div1一个元素设置了setCapture(),然后再绑定事件,比如一个点击事件,接下来,无论你点击哪里,被触发的都是div1元素的点击事件了,甚至你点击浏览器的地址栏,工具栏,都会触发div1的点击事件()。此时你的ie浏览器会像中毒一样,点击关闭按钮都是在触发div1的点击事件(),其他元素不管在div之上还是之下的,他们绑定的点击事件全部失效。 - 这里刚好可以运用IE的
setCapture
和releaseCapture
,当鼠标的div1上按下时,为div1 setCapture,这时所有的事件都集中到了div1身上,捕获所有事件,再也不会去选中其他的元素了,在鼠标抬起后,运用releaseCapture,不再捕获。
写一个兼容性比较好的拖拽DEMO的更多相关文章
- 缩放系列(三):一个可以手势缩放、拖拽、旋转的layout
弄了一个下午,终于搞出来了,PowerfulLayout 下面是一个功能强大的改造的例子: 可以实现以下需求: 1.两个手指进行缩放布局 2.所有子控件也随着缩放, 3.子控件该有的功能不能丢失(像b ...
- angular ng-repeat+sortable 拖拽demo
由于项目需求,需要使用angular 实现列表的增.删.改,并且列表支持拖拽. 看了下angular-ui 里面的sortable组件,使用起来也是非常简单,几十行代码就完成了所需功能. 我现在懒得想 ...
- iOS 创建一个可以点击并拖拽的Button
HSCButton.h #import <UIKit/UIKit.h> @interface HSCButton : UIButton { CGPoint beginPoint; } @p ...
- 移动端拖拽(模块化开发,触摸事件,webpack)
通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...
- 自己写一个jqery的拖拽插件
说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,仅仅是,感觉不像插件,所以用jQuery实现了一版. 实现的功能:能够指定拖拽的边界,在拖拽过程中,能够触发几个自己定义事件 先 ...
- [转自大神]js拖拽小总结
https://blog.csdn.net/u013040887/article/details/83059094 权侵删 这里写的是一个原生js实现拖拽的效果,首先: 1.实现拖拽的三大事件,是要首 ...
- canvas drag 实现拖拽拼图小游戏
博主一直心心念念想做一个小游戏- 前端时间终于做了一个小游戏,直到现在才来总结,哈哈- 以后要勤奋点更新博客! 实现原理 1.如何切图? 用之前的方法就是使用photoshop将图片切成相应大小的图 ...
- MVVM模式下实现拖拽
在文章开始之前先看一看效果图 我们可以拖拽一个"游戏"给ListBox,并且ListBox也能接受拖拽过来的数据, 但是我们不能拖拽一个"游戏类型"给它. 所以 ...
- RecyclerView拖拽排序和滑动删除实现
效果图 如何实现 那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...
随机推荐
- Apache OFbiz entity engine源代码解读
简单介绍 近期一直在看Apache OFbiz entity engine的源代码.为了能够更透彻得理解,也由于之前没有看人别人写过分析它的文章,所以决定自己来写一篇. 首先,我提出一个问题,假设你有 ...
- python 命令行参数,以及文件操作
#demo.py #!/usr/bin/python import sys print sys.argv #python demo.py 11 22 33 44 55 ['demo.py', '11' ...
- c++栈管理库TCMalloc、jeMalloc
示例:http://blog.csdn.net/chosen0ne/article/details/9338591
- HTML静态网页(标签、表格)
HTML静态网页: 打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background 背景壁纸.图片 text 文字颜色 topmargin ...
- 使用 IObjectSafety 标记 ATL 控件初始化的安全
MSDN原文.这里我将代码使用到了BHO里面,运行调试没问题.拿来分享一下 概要 您可以使用 IObjectSafetyImpl 的默认实现来标记为可安全执行脚本的控件.在许多情况下,您需要将标记为可 ...
- zoj 3195 Design the city lca倍增
题目链接 给一棵树, m个询问, 每个询问给出3个点, 求这三个点之间的最短距离. 其实就是两两之间的最短距离加起来除2. 倍增的lca模板 #include <iostream> #in ...
- lambda, reduce, map求阶乘之和
学完这几个优雅的内建函数,就可以做一些有趣的小练习来激发兴趣了.而python最大的好处便是简洁,看下边要求 用1行代码求 1! + 2! + 3! + ... + 10! 求阶乘 reduce函数用 ...
- poj 1410 计算几何
/** 注意: 千万得小心..就因为一个分号,调了一个晚上... **/ #include <iostream> #include <algorithm> using name ...
- [转]Swift 简介 - 苹果最新的编程语言
Swift 真的可以说是最新的编程语言了,2014wwdc刚刚发布,下面来了解一下都有哪些特点. 首先感谢原作者,主要内容是借鉴他的,参考链接 http://zh.lucida.me/blog/an- ...
- 关于document.selection和TextRange对象的介绍
document.selection只有IE支持 window.getSelection()也只有FireFox和Safari支持,都不是标准语法. selection 对象代表了当前激活选中区,即高 ...