写一个兼容性比较好的拖拽DEMO

查看Demo

思路

  1. div盒子
  2. 鼠标按下事件onmousedown
  3. 鼠标移动事件onmousemove，获得鼠标的坐标，将div移动至鼠标的当前坐标
  4. 鼠标抬起事件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的更多相关文章

  1. 缩放系列（三）：一个可以手势缩放、拖拽、旋转的layout

    弄了一个下午,终于搞出来了,PowerfulLayout 下面是一个功能强大的改造的例子: 可以实现以下需求: 1.两个手指进行缩放布局 2.所有子控件也随着缩放, 3.子控件该有的功能不能丢失(像b ...

  2. angular ng-repeat+sortable 拖拽demo

    由于项目需求,需要使用angular 实现列表的增.删.改,并且列表支持拖拽. 看了下angular-ui 里面的sortable组件,使用起来也是非常简单,几十行代码就完成了所需功能. 我现在懒得想 ...

  3. iOS 创建一个可以点击并拖拽的Button

    HSCButton.h #import <UIKit/UIKit.h> @interface HSCButton : UIButton { CGPoint beginPoint; } @p ...

  4. 移动端拖拽（模块化开发，触摸事件，webpack）

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...

  5. 自己写一个jqery的拖拽插件

    说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,仅仅是,感觉不像插件,所以用jQuery实现了一版. 实现的功能:能够指定拖拽的边界,在拖拽过程中,能够触发几个自己定义事件 先 ...

  6. [转自大神]js拖拽小总结

    https://blog.csdn.net/u013040887/article/details/83059094 权侵删 这里写的是一个原生js实现拖拽的效果,首先: 1.实现拖拽的三大事件,是要首 ...

  7. canvas drag 实现拖拽拼图小游戏

    博主一直心心念念想做一个小游戏-  前端时间终于做了一个小游戏,直到现在才来总结,哈哈- 以后要勤奋点更新博客! 实现原理 1.如何切图? 用之前的方法就是使用photoshop将图片切成相应大小的图 ...

  8. MVVM模式下实现拖拽

    在文章开始之前先看一看效果图 我们可以拖拽一个"游戏"给ListBox,并且ListBox也能接受拖拽过来的数据, 但是我们不能拖拽一个"游戏类型"给它. 所以 ...

  9. RecyclerView拖拽排序和滑动删除实现

    效果图 如何实现 那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...

随机推荐

  1. Apache OFbiz entity engine源代码解读

    简单介绍 近期一直在看Apache OFbiz entity engine的源代码.为了能够更透彻得理解,也由于之前没有看人别人写过分析它的文章,所以决定自己来写一篇. 首先,我提出一个问题,假设你有 ...

  2. python 命令行参数，以及文件操作

    #demo.py #!/usr/bin/python import sys print sys.argv #python demo.py 11 22 33 44 55 ['demo.py', '11' ...

  3. c++栈管理库TCMalloc、jeMalloc

    示例:http://blog.csdn.net/chosen0ne/article/details/9338591

  4. HTML静态网页（标签、表格）

    HTML静态网页: 打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin ...

  5. 使用 IObjectSafety 标记 ATL 控件初始化的安全

    MSDN原文.这里我将代码使用到了BHO里面,运行调试没问题.拿来分享一下 概要 您可以使用 IObjectSafetyImpl 的默认实现来标记为可安全执行脚本的控件.在许多情况下,您需要将标记为可 ...

  6. zoj 3195 Design the city lca倍增

    题目链接 给一棵树, m个询问, 每个询问给出3个点, 求这三个点之间的最短距离. 其实就是两两之间的最短距离加起来除2. 倍增的lca模板 #include <iostream> #in ...

  7. lambda, reduce, map求阶乘之和

    学完这几个优雅的内建函数,就可以做一些有趣的小练习来激发兴趣了.而python最大的好处便是简洁,看下边要求 用1行代码求 1! + 2! + 3! + ... + 10! 求阶乘 reduce函数用 ...

  8. poj 1410 计算几何

    /** 注意: 千万得小心..就因为一个分号,调了一个晚上... **/ #include <iostream> #include <algorithm> using name ...

  9. [转]Swift 简介 - 苹果最新的编程语言

    Swift 真的可以说是最新的编程语言了,2014wwdc刚刚发布,下面来了解一下都有哪些特点. 首先感谢原作者,主要内容是借鉴他的,参考链接 http://zh.lucida.me/blog/an- ...

  10. 关于document.selection和TextRange对象的介绍

    document.selection只有IE支持 window.getSelection()也只有FireFox和Safari支持,都不是标准语法. selection 对象代表了当前激活选中区,即高 ...