自己封装的一个原生JS拖动方法。

代码:

 1 function drag(t,p){
 2 
 3     var point = p || null,
 4         target = t || null,
 5         resultX = 0,
 6         resultY = 0;
 7 
 8     (!point)? point = target : ''; //如果没有拖动点,则拖动点默认为整个别拖动元素
 9 
10     function getPos(t){
11         var offsetLeft = 0,
12             offsetTop = 0,
13             offsetParent = t;
14 
15         while(offsetParent){
16             offsetLeft+=offsetParent.offsetLeft;
17             offsetTop+=offsetParent.offsetTop;
18             offsetParent = offsetParent.offsetParent;
19         }
20 
21         return {'top':offsetTop,'left':offsetLeft};
22     }
23 
24     function core(){
25 
26         var width = document.body.clientWidth || document.documentElement.clientWidth,
27             height = document.body.clientHeight || document.documentElement.clientHeight; 
28             maxWidth = width - target.offsetWidth,
29             maxHeight = height - target.offsetHeight;
30 
31         (resultX >= maxWidth)?  target.style.left = maxWidth+'px' :  (resultX > 0)?target.style.left = resultX +'px': ''; //重置默认位置。
32         (resultY >= maxHeight)?   target.style.top = maxHeight +'px' : (resultY > 0)?target.style.top = resultY +'px':''; //重置默认位置。
33 
34         point.οnmοusedοwn=function(e){    
35             var e = e || window.event,
36                 coordX = e.clientX,
37                 coordY = e.clientY,
38                 posX = getPos(target).left,
39                 posY = getPos(target).top;
40 
41             point.setCapture && point.setCapture();    //将Mouse事件锁定到指定元素上。
42             document.οnmοusemοve=function(e){
43 
44                 var ev = e || window.event,
45                     moveX = ev.clientX,
46                     moveY = ev.clientY;
47 
48                 resultX = moveX - (coordX - posX); //结果值是坐标点减去被拖动元素距离浏览器左侧的边距
49                 resultY = moveY - (coordY - posY);
50 
51                 (resultX > 0 )?((resultX < maxWidth)?target.style.left = resultX+'px' : target.style.left = maxWidth+'px') : target.style.left = '0px';  
52                 (resultY > 0 )?((resultY < maxHeight)?target.style.top = resultY+'px' : target.style.top = maxHeight+'px') : target.style.top = '0px'; 
53 
54                 ev.stopPropagation && ev.stopPropagation(); 
55                 ev.preventDefault;
56                 ev.returnValue = false;
57                 ev.cancelBubble = true;
58             };
59         };
60         document.οnmοuseup=function(){    // 解决拖动时,当鼠标指向的DOM对象非拖动点元素时,无法触发拖动点的onmousedown的BUG。
61             document.onmousemove = null;    
62             point.releaseCapture && point.releaseCapture();    // 将Mouse事件从指定元素上移除。
63         };
64         point.οnmοuseup=function(e){
65             var e = e || window.event;
66             document.onmousemove = null;
67             point.releaseCapture && point.releaseCapture();
68         };
69     }
70     core();
71     window.onresize = core;    
72 }

使用方式:

1 drag(t,p)
2 /* 
3  * 说明 
4  * t 表示被拖动的元素
5  * p 表示拖动点
6 */
7 
8 // 注意:如果省略拖动点,默认可拖动的区域是整个被拖动元素

 

转载于:https://www.cnblogs.com/HCJJ/p/5834559.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470187.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nvidia的jetson系列的方案_NVIDIA Jetson Xavier NX开发者套件主要应用于自主机器边缘计算产品系列...

NVIDIA副总裁&#xff0c;边缘计算业务总经理Deepu Talla表示&#xff1a;“NVIDIA已在多个行业中创建并优化了大量AI软件。如今&#xff0c;有了云原生技术的加持&#xff0c;我们在嵌入式和机器人领域的客户就能通过高性能、低功耗的Jetson系列产品&#xff0c;受益于软件的创…

Vue-Router4 学习笔记

一、URL的hash 前端路由是如何做到URL和内容进行映射呢&#xff1f;监听URL的改变。 URL的hash也就是锚点(#), 本质上是改变window.location的href属性&#xff1b; 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新&#xff1b; hash的优势就是兼容性更好&am…

转:VC中MessageBox的常见用法

一、关于MessageBox 消息框是个很常用的控件&#xff0c;属性比较多&#xff0c;本文列出了它的一些常用方法&#xff0c;及指出了它的一些应用场合。 1.MessageBox("这是一个最简单的消息框&#xff01;"); 2.MessageBox("这是一个有标题的…

python subprocess communicate_Python中的Subprocess模块

以前我一直用os.system()处理一些系统管理任务,因为我认为那是运行linux命令最简单的方式.我们能从Python官方文档里读到应该用subprocess 模块来运行系统命令.subprocess模块允许我们创建子进程,连接他们的输入/输出/错误管道&#xff0c;还有获得返回值。subprocess模块打算来…

Vuex4学习笔记

一、Vuex的状态管理 二、Vuex的安装 我们这里使用的是vuex4.x&#xff0c;安装的时候需要添加 next 指定版本&#xff1b; npm install vuexnext三、创建Store 每一个Vuex应用的核心就是store&#xff08;仓库&#xff09;&#xff1a; store本质上是一个容器&#xff0c;它…

在局域网搭建一个带 web 操作页面的 git 版本服务器 - Gitlab

以下内容为本人的著作&#xff0c;如需要转载&#xff0c;请声明原文链接 微信公众号「englyf」https://mp.weixin.qq.com/s/Br0ETd_aNffEZoTAba03Bw 最近到了新团队&#xff0c;只有几部新电脑&#xff0c;然后啥也没有了。老江说需要一个管理工程代码的 git 版本服务器&…

div中iframe高度自适应问题

网页分为上、中、下三部分&#xff0c;上、下高度固定中间高度自适应&#xff1b;中间分为左、右两部分&#xff0c;左边宽度固定&#xff0c;右边宽度自适应。现在右侧div是宽度和高度都是自适应&#xff0c;右侧div里有个IFrame&#xff0c;想让IFrame自适应外部div的宽度和高…

python日志模块备份_Python Logging模块 输出日志颜色、过期清理和日志滚动备份

#coding:utf-8importloggingfrom logging.handlers importRotatingFileHandler # 按文件大小滚动备份import colorlog #控制台日志输入颜色importtimeimportdatetimeimportoscur_path os.path.dirname(os.path.realpath(__file__)) #log_path是存放日志的路径log_path os.path…

JS高级——手写call()、apply()、bind()

0、call、apply、bind的区别 bind&#xff0c;call&#xff0c;apply的作用都是用来改变this指向的 call方法 call方法的第一个参数是this的指向 后面传入的是一个参数列表&#xff08;注意和apply传参的区别&#xff09;。当一个参数为null或undefined的时候&#xff0c;函数中…

ubyntu 链接mysql_ubuntu mysql远程连接

ubuntu mysql远程连接http://blog.csdn.net/helen_shw/archive/2010/01/22/5224524.aspxkikikiki-desktop:/etc/apache2mysql error number 2003Cant connect to MySQL server xxx.xxx.xxx.xxx (10061)在ubuntu 9.04中默认安装了mysql&#xff0c;默认只能本地访问&#xff0c;…

js文章QQ空间分享

<!--示例一--> <div id"ckepop" classfeixiangjias> <a href"javascript:" class"jiathis jiathis_txt jtico jtico_jiathis" target"_blank">分享到&#xff1a;</a> <a class"jiathis_button_qzo…

JS高级——深入剖析函数中的this指向问题

一、this到底指向什么呢&#xff1f; 我们先说一个最简单的&#xff0c;this在全局作用域下指向什么&#xff1f; 这个问题非常容易回答&#xff0c;在浏览器中测试就是指向window 但是&#xff0c;开发中很少直接在全局作用于下去使用this&#xff0c;通常都是在函数中使用…

日志测试法

/*** 写入日志*/ function write2log($content,$filenamelog) {$myfile fopen($filename.".txt", "a") or die("Unable to open file!");$txt date(Y-m-d H:i:s)."\t".$content."\r\n";fwrite($myfile, $txt);fclose($myf…

JS高级——arguments参数详解

一、认识arguments arguments 是一个 对应于 传递函数的参数 的 类数组(array-like)对象。 array-like意味着它不是一个数组类型&#xff0c;而是一个对象类型&#xff1a; 但是它却拥有数组的一些特性&#xff0c;比如说length&#xff0c;比如可以通过index索引来访问&…

php 函数有命名空间吗_解析 ThinkPHP 的命名空间

php中文网最新课程每日17点准时技术干货分享大家都知道由于PHP语法里不支持函数重载机制&#xff0c;如果一个应用里有两个同名的方法&#xff0c;怎么办呢&#xff1f;在Yii 框架为了避免名字重复引起问题&#xff0c;全部的类前边都有 C 字样&#xff0c;而在ThinkPHP里就引入…

JS高级——纯函数、柯里化(手写自动柯里化函数)、组合函数(手写自动组合函数)

一、理解JavaScript纯函数 函数式编程中有一个非常重要的概念叫纯函数&#xff0c;JavaScript符合函数式编程的范式&#xff0c;所以也有纯函数的概念&#xff1b; 在react开发中纯函数是被多次提及的&#xff1b;比如react中组件就被要求像是一个纯函数&#xff08;为什么是…

(五)uboot移植补基础之shell

1、shell介绍&#xff1a;shell是操作系统的终端命令行 (1)shell可以理解为软件系统提供给用户操作的命令行界面&#xff0c;可以说它是人机交互的一种方式。(2)我们可以使用shell和操作系统、uboot等软件系统进行交互。具体来说就是我们通过shell给软件系统输入命令然后回车执…

三包围结构的字是什么样的_拼音带kun的字大全_50个拼音含kun的字组词

原标题&#xff1a;拼音带kun的字大全_50个拼音含kun的字组词1、昆(kūn)&#xff0c;8画&#xff0c;上下结构&#xff0c;部首&#xff1a;曰(日)组词&#xff1a;昆虫(kūn chng) | 昆曲(kūn qǔ) | 昆山(kūn shān) | 昆仲(kūn zhng) | 昆吾(kūn w) | 昆仑(kūn ln) |2…

JS高级——with语句、eval函数、严格模式

一、with语句 with语句的作用&#xff1a;扩展一个语句的作用域链。 不建议使用with语句&#xff0c;因为它可能是混淆错误和兼容性问题的根源。并且&#xff0c;在浏览器开启严格模式下&#xff0c;使用with会报错&#xff1a; 二、eval函数 eval是一个特殊的函数&#x…

写 一个PHP脚本遇到的问题总结

在项目中&#xff0c;因为之前的人员&#xff0c;基础数据没有处理好&#xff0c;后面需要写一个脚本来处理这个问题&#xff0c;经验少&#xff0c;总结如下&#xff1a;1.在linux下直接连接跑处理MySQL数据的脚本&#xff0c;要用PDO的方式连接数据库&#xff0c;长时间在框架…