工作需要写的一个js拖拽组件
发布时间:2024-04-08 10:53:20
标签:拖拽组件
/*
*使用方法:
* var d = new Drag({id:'dragPannel',maxLeft:500,maxTop:200});
* d.ready();
*请注意:
* 拖动对象的left和top样式必须写在其style属性里边
*
*/
//矫正调用者。将 fn 作为 newObj 的方法调用
function repairCaller(newObj, fn){
return function(){
return fn.apply(newObj, arguments);
}
}
function Drag( config ){
this.moveTarget = T.dom.get( config.id );
this.startLeft = parseInt(this.moveTarget.style.left); //每次拖动开始时被拖动对象的 left,top
this.startTop = parseInt(this.moveTarget.style.top);
this.startClientX = this.startLeft; //保存拖动开始时事件的 clientX, clientY
this.startClientY = this.startTop;
this.MAX_LEFT = config.maxLeft||document.documentElement.clientWidth - this.moveTarget.offsetWidth; //元素可以移动的最大范围
this.MAX_TOP = config.maxTop||document.documentElement.clientHeight - this.moveTarget.offsetHeight;
this.lock = true;
}
Drag.prototype.ready = function(){
//绑定事件
T.bind(document, "mousedown", repairCaller(this,this.down));
T.bind(document, "mousemove", repairCaller(this,this.move));
T.bind(document, "mouseup", repairCaller(this,this.stop));
}
Drag.prototype.down = function(){
//取得事件对象
var event = T.event.getEvent(arguments[0]),
target = T.event.getTarget(event);
if (target == this.moveTarget){
this.lock = false;
//在事件开始时保存各种坐标位置
this.startLeft = parseInt(this.moveTarget.style.left);
this.startTop = parseInt(this.moveTarget.style.top);
this.startClientX = event.clientX;
this.startClientY = event.clientY;
}
};
Drag.prototype.move = function(){
if(!this.lock ){
//取得事件对象
var event = T.event.getEvent(arguments[0]),
target = T.event.getTarget(event);
if(target == this.moveTarget){
//如有选择内容,清除之
//window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//凑数拖动范围有没超过最大限制
var realLeft = this.startLeft + event.clientX - this.startClientX, //实际的移动范围
realTop = this.startTop + event.clientY - this.startClientY,
rightLeft , rightTop; //正确的 left, top 取值
rightLeft = realLeft > this.MAX_LEFT ? this.MAX_LEFT : ( realLeft > 0 ? realLeft : 0 );
rightTop = realTop > this.MAX_TOP ? this.MAX_TOP : ( realTop > 0 ? realTop : 0 );
this.moveTarget.style.left = rightLeft + "px";
this.moveTarget.style.top = rightTop + "px";
}
else{
this.lock = true;
}
}
};
Drag.prototype.stop = function(){
this.lock = true
};
后记:
在写的过程中非常需要注意的几点是:
1、拖动层的 position、left 和 top 必须写在 style 里
2、移动过程中设置 left 和 top 要带单位,否则不起作用
3、多级 div 嵌套时需要给父 div 加 over-flow:hidden 样式
完毕!
0
投稿
猜你喜欢
- 一、项目需求爬取排行榜小说的作者,书名,分类以及完结或连载二、项目分析目标url:“https://www.qidian.com/rank/
- 用python加“验证码”为关键词在baidu里搜一下,可以找到很多关于验证码识别的文章。我大体看了一下,主要方法有几类:一类是通过对图片进
- 出于工作需要,学习了GAN,原理这块就不多讲了,主要讲怎么训练自己的数据生成新的图片,因为博客上大多是生成MNIST数据集,生成自己的图片时
- Fabric是一个用Python开发的部署工具,最大特点是不用登录远程服务器,在本地运行远程命令,几行Python脚本就可以轻松部署。文档入
- 本文实例讲述了go语言使用第三方包 json化结构体操作。分享给大家供大家参考,具体如下:前提条件:安装好操作系统对应的gitgo get
- 如何用OdbcRegTool组件来创建一个数据源?OdbcRegTool是一个免费组件,在服务器上安装后,就可以来创建一个数据源:<h
- 一,什么是mycat一个彻底开源的,面向企业应用开发的大数据库集群支持事务、ACID、可以替代MySQL的加强版数据库一个可以视为MySQL
- Python爬虫之Scrapy环境搭建如何搭建Scrapy环境首先要安装Python环境,Python环境搭建见:https://blog.
- 方法1:cmd环境下,用pip install selenium可能会很慢方法2:下载selenium安装包手动安装下载地址:https:/
- 快速上手我们都知道go语言没有原生的注解,但是做业务开发有些时候没有注解确实不方便。go-doudou通过go语言标准库ast/parser
- 一、图像直方图1.1 定义图像直方图是图像的基本属性之一,也是反映图像像素数据分布的统计学特征,其横坐标代表了图像像素点在[0,255]范围
- python内置模块collections介绍collections是Python内建的一个集合模块,提供了许多有用的集合类。1、named
- Exec sp_droplinkedsrvlogin ZYB,Null --删除映射(录与链接服务器上远程登录之间的映射) Exec sp_
- 本文总结分析了Python装饰器简单用法。分享给大家供大家参考,具体如下:装饰器在python中扮演着很重要的作用,例如插入日志等,装饰器可
- 今天简单使用了一下python的re模块和lxml模块,分别利用的它们提供的正则表达式和xpath来解析页面源码从中提取所需的title,x
- 在《多进程并发与同步》中介绍了进程创建与信息共享,除此之外python还提供了更方便的进程间通讯方式。进程间通讯multiprocessin
- 前言本文主要给大家介绍了关于python使用正则表达式的非贪婪模式的相关内容,分享出来供大家参考学习,下面话不多说了,来一起详细的介绍吧。在
- 原理:建立一个任务队列,然多个线程都从这个任务队列中取出任务然后执行,当然任务队列要加锁,详细请看代码import threadingimp
- 大家好,我是了不起!在某些难以抉择得时候,我们经常要用外力来帮助我们做出选择比如,梁山出征方腊前沙场点兵,挑选先锋的场景这个时候
- Google Chrome 的发布,使我们更加的注重基于 WebKit 核心的浏览器的表现情况,但我们很多时候“不小心”就会出现问题。考虑下