源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[JavaScript] js实现拖拽 闭包函数详细介绍

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2012-11-25 12:53:40 | 显示全部楼层 |阅读模式
在开发过程中可能会使用js实现拖拽等相关功能,本文将以此问题进行深入介绍,需要了解的朋友可以参考下 js拖拽

采用简单的闭包实现方式
复制代码 代码如下:
/**
* Created with JetBrains WebStorm.
* User: lsj
* Date: 12-11-24
* Time: 下午12:59
* To change this template use File | Settings | File Templates.
*/
var dragmanager=(function()
{
//标识移动元素z轴坐标
var index_z=1;
//当前的拖拽元素
var drganow;
//移动标识符号
var dragbegin=false;
//鼠标点击时距离div左边距离
var relativex=0;
//鼠标点击时距离div上边距离
var relativey=0;
//标识鼠标是否移出
var isout=false;
return {
/**
* 为document绑定鼠标提起事件,主要防止鼠标移动过快跳出el区域
*/
bingDocOnMouseUp:function()
{
//注册全局的onmouseup事件,主要防止鼠标移动过快导致鼠标和el不同步
document.onmouseup=function(e)
{
var ev = window.event || e;
if(isout && dragbegin)
{
//改变div的相对位置
drganow.style.left= (ev.clientX-relativex)+'px';
drganow.style.top=(ev.clientY-relativey)+'px';
drganow.style.cursor='normal';
dragbegin=false;
isout=false;
}
}
},
/**
* 将注入的元素绑定事件
* @param el
*/
registerElementEv:function(element)
{
element.onmousedown=function(e)
{
var ev = window.event || e;
var clientx=ev.clientX;
var clienty= ev.clientY;
var left= parseInt(this.style.left.substring(0, this.style.left.indexOf("p")));
var top= parseInt(this.style.top.substring(0, this.style.top.indexOf("p")));
relativex=clientx-left;
relativey=clienty-top;
index_z++;
this.style.zIndex=index_z;
drganow=this;
dragbegin=true;
}
element.onmousemove=function(e)
{
var ev = window.event || e;
//开始拖拽
if(dragbegin)
{
//改变div的相对位置
this.style.left= (ev.clientX-relativex)+'px';
this.style.top=(ev.clientY-relativey)+'px';
this.style.cursor='move';
}
}
element.onmouseout=function(e)
{
isout=true;
}
element.onmouseup=function(e)
{
var ev = window.event || e;
if(dragbegin)
{
//改变div的相对位置
drganow.style.left= (ev.clientX-relativex)+'px';
drganow.style.top=(ev.clientY-relativey)+'px';
drganow.style.cursor='normal';
dragbegin=false;
}
}
}
}
})();

1.采用闭包的形式实现 ,方便后期的维护,将移动过程所需的变量全部转移进gridmanager里面
2.拖拽过程中 鼠标移动过快导致移动元素跟不上鼠标的移动,所以要注册document.oumouseup事件,该事件的开关是有移动元素的onmouseout事件触发的
3.拖拽的过程中可能会触发浏览器自身的onmousemove的select事件,可以进行屏蔽ie下是onmousemove="document.selection.empty()"
回复

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-10-24 20:59:31 | 显示全部楼层
管灌灌灌灌灌灌灌灌灌灌
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

307

积分

中级会员

Rank: 3Rank: 3

积分
307
发表于 2022-11-4 13:39:44 | 显示全部楼层
还有人在不。。。。。。。。。。啊
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

124

积分

注册会员

Rank: 2

积分
124
发表于 2022-11-21 20:59:11 | 显示全部楼层
而非为吾问无为谓娃娃
回复 支持 反对

使用道具 举报

27

主题

2万

回帖

331

积分

中级会员

Rank: 3Rank: 3

积分
331
发表于 2023-1-17 18:07:10 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

93

积分

注册会员

Rank: 2

积分
93
发表于 2023-5-16 19:24:15 | 显示全部楼层
哟哟哟哟哟以偶
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

207

积分

中级会员

Rank: 3Rank: 3

积分
207
发表于 2023-7-17 10:39:09 | 显示全部楼层
撒旦撒旦撒擦擦擦擦
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

58

积分

注册会员

Rank: 2

积分
58
发表于 2023-7-26 22:29:46 | 显示全部楼层
老衲笑纳了
回复 支持 反对

使用道具 举报

11

主题

1万

回帖

103

积分

注册会员

Rank: 2

积分
103
发表于 2023-12-11 11:51:42 | 显示全部楼层
vcxvcxv
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

380

积分

中级会员

Rank: 3Rank: 3

积分
380
发表于 2024-4-29 05:00:14 | 显示全部楼层
女生看了弄丢了卡萨诺的卡洛斯
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-2-7 19:12 , Processed in 0.068675 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表