JavaScript之拖拽功能、封装

最新推荐文章于 2019-10-28 11:48:04 发布

Mosowe

最新推荐文章于 2019-10-28 11:48:04 发布

阅读量645

点赞数

分类专栏： JavaScript 插件文章标签： javascript 拖拽全局捕获

本文链接：https://blog.csdn.net/skyblacktoday/article/details/74165536

版权

JavaScript 同时被 2 个专栏收录

53 篇文章 3 订阅

订阅专栏

插件

8 篇文章 0 订阅

订阅专栏

通过之前一段时间的学习，逐步掌握了JavaScript的一些基本语法，学完之后还得多加练习，根据所学知识，做了一个简易的拖拽功能。

首先先布好html结构，包括样式，这里简单的做了两个拖拽的功能，一个相对于document，一个相对于id = ‘box’，为了消除浏览器自带的文本拖拽功能，添加了一行文字；

演示地址

html代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽封装</title>
<script src="../js/drag.js"></script>
<style>
	#div{ overflow:hidden; width:50px; height:50px; background-color:#09F; position:absolute; z-index:5}
	#img{ display:block; position:absolute}
	#box{ width:600px; height:600px; position:relative; margin:20px auto; border:1px solid #000;}
</style>
</head>

<body>
全选试试拖拽
<div id="div"></div>
<div id="box">
<img src="../Skins/gd07.jpg" id="img" width="100">
</div>
</body>
</html>

效果图：一个相对于document，一个相对于#box

js调用代码：

<script>
var div = document.getElementById("div");
var img = document.getElementById("img");
var box = document.getElementById("box");
//调用
drag(img,box); //相对于#box拖拽#img
drag(div,document);//相对于document拖拽#div
</script>

消除浏览器自带的文本选中拖拽功能：

ie8及以下版本：

if(obj.setCapture){	//设置全局捕获==>取消浏览器默认的文字拖拽（ie8及以下）
			obj.setCapture();
			}

标准及ie8以上版本（因为浏览器文本拖拽功能是onmousedown事件触发的，所以只要令该事件的返回值为空即可）：

obj.onmousedown = function(){
	return false;
}

防止被拖拽的元素跑到拖拽区域外面去了，所以需要限制拖拽的范围：left范围在 0 ~ 拖拽区的content宽-被拖拽元素的offsetWidth，top范围在 0 ~ 拖拽区的content高-被拖拽元素的offsetHeight；为了达到磁性吸附的功能，在上诉区域内向内减少20个像素作为判断，即当被拖拽元素的left值，top值距离边框少于20px时，被拖拽元素自动贴上去，即left=0， top=0；

代码如下：

if(leftArea < 20){
	leftArea = 0;
}else if(leftArea>w-obj.offsetWidth-20){
	leftArea = w-obj.offsetWidth;
}
if(topArea < 20){
	topArea = 0;
}else if(topArea>h-obj.offsetHeight-20){
	topArea = h -obj.offsetHeight;
}

封装的js完整代码：

function drag(obj,box){//第一个参数是被拖拽的元素，第二个参数是拖拽的限制区域；例如上面调用的#box和document
	obj.onmousedown = function(ev){
		var ev = ev || event;
		var dragl = ev.clientX - this.offsetLeft;
		var dragt = ev.clientY - this.offsetTop;
		
		if(obj.setCapture){//设置全局捕获==>取消浏览器默认的文字拖拽（ie8及以下）
			obj.setCapture();
			}
		
		document.onmousemove = function(ev){
			var ev =ev || event;
			var leftArea = ev.clientX - dragl;
			var topArea = ev.clientY - dragt;
			var w=null,h=null;
			if(box == document){
				w = document.documentElement.clientWidth
				h = document.documentElement.clientHeight
				}else{
					w = box.scrollWidth;
					h = box.scrollHeight;
					}
			
			if(leftArea < 20){
				leftArea = 0;
				}else if(leftArea>w-obj.offsetWidth-20){
					leftArea = w-obj.offsetWidth;
					}
			if(topArea < 20){
				topArea = 0;
				}else if(topArea>h-obj.offsetHeight-20){
					topArea = h -obj.offsetHeight;
					}
			
			obj.style.left =  leftArea + 'px';
			obj.style.top =  topArea + 'px';
			}
		document.onmouseup = function(){
			document.onmousemove =null;
			document.onmouseup = null;
			if(obj.releaseCapture){//取消全局捕获
				obj.releaseCapture();
				}
			}
		return false;//取消浏览器默认的文字拖拽 标准浏览器，ie8以上
		}
}

下载地址