JavaScript之拖拽功能、封装

来源：互联网发布：ps cs6 for mac破解版编辑：程序博客网时间：2024/05/20 23:33

通过之前一段时间的学习，逐步掌握了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拖拽#imgdrag(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和documentobj.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.clientWidthh = 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以上}}

下载地址

阅读全文

0 0