写一个兼容性比较好的拖拽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. QT完美转换特殊字符的大小写

    Util::ShowMessage(QString::fromUtf8("ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØŒŠþÙÚÛÜÝŸ€")); Util::ShowMess ...

  2. D3.js学习记录 - 数据类型【转】【新】

    1.变量 JAVASCRIPT的变量是一种类型宽松的语言.定义变量不用指定数据类型.而且还是动态可变的. var value = 100;value = 99.9999;value = false;v ...

  3. Is it possible to implement a Firebug-like “inspect element” DOM element highlighter with client-side JavaScript?

    Is it possible to implement a Firebug-like "inspect element" DOM element highlighter with ...

  4. 使用COCOS2D-X JSB开发，在js页面中设置iOS键盘模式

    XYSDK.h void setKeyboardType(int type); XYSDK.cpp voidXYSDK::setKeyboardType(int type) { #if (CC_TAR ...

  5. 借助树的概率dp(期望)+数学-好题-hdu-4035-Maze

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4035 题目意思: 有n个房间,有n-1条通道连接这n个房间(每两个房间之间有且只有一条路,所以实际上 ...

  6. c/c++处理参数

    直接上代码:涉及函数getopt(),getopt_long() #include <unistd.h> #include <stdlib.h> #include <st ...

  7. 在 win 10 中使用sql 2012 附加低版本数据失败的解决办法。

    随着win 10 的发布,我也尝试把自己的笔记本升级下,体验win10,由于自己电脑好长时间没有管理过,东西比较乱,一激动就格式了硬盘.但是所有的资料都丢失了,不过我都提前备份到网盘上.好了,废话不多 ...

  8. 快速检查SQL两表数据是否一致

    1前话 项目内实现了一新功能:克隆数据库. 2目标 克隆并非用SQLSERVER克隆,故完毕后需要检查各表内一些数据与原表一致性.一些表中的某一些列容许不一致. 3实现 将两表的需要检查的几列取出,相 ...

  9. Sliding Window Maximum

    (http://leetcode.com/2011/01/sliding-window-maximum.html) A long array A[] is given to you. There is ...

  10. BZOJ 1497: [NOI2006]最大获利( 最大流 )

    下午到周六早上是期末考试...但是我还是坚守在机房....要挂的节奏啊.... 这道题就是网络流 , 建图后就最大流跑啊跑啊跑... --------------------------------- ...