通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
时间:2022-04-22
本文章向大家介绍通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽,主要内容包括前言、拖拽实现、使用方法、拖拽问题、排除特定元素的方法、总结、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
前言
关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球。本文的重点是讲解如何在某些特定的元素上禁止拖拽。这是我在编写插件时遇到的问题,其实很多插件的拖拽功能并没有处理这些细节,经过翻阅 jquery ui 的源码才找到答案。
拖拽实现
关于拖拽功能不再啰嗦,直接贴代码
/**
* [draggable 拖拽方法]
* @param {[type]} modal [移动元素]
* @param {[type]} handle [拖拽元素]
*/
var draggable = function(modal, handle) {
var isDragging = false;
var startX = 0,
startY = 0,
left = 0,
top = 0;
var dragStart = function(e) {
var e = e || window.event;
e.preventDefault();
isDragging = true;
startX = e.clientX;
startY = e.clientY;
left = $(modal).offset().left;
top = $(modal).offset().top;
}
var dragMove = function(e) {
var e = e || window.event;
e.preventDefault();
if (isDragging) {
var endX = e.clientX,
endY = e.clientY,
relativeX = endX - startX,
relativeY = endY - startY;
$(modal).css({
left: relativeX + left + 'px',
top: relativeY + top + 'px'
});
}
return false;
}
var dragEnd = function(e) {
isDragging = false;
}
$(handle).on('mousedown', dragStart);
$(document).on('mousemove', dragMove);
$(document).on('mouseup', dragEnd);
}
使用方法
演示 Demo HTML
<div class="modal" id="modal">
<div class="modal-header">
<button class="btn-close"><i class="fa fa-times"></i></button>
</div>
<div class="modal-body"></div>
</div>
演示 Demo CSS
.modal {
position: fixed;
top: 100px;
left: 100px;
width: 300px;
border: 1px solid #aaa;
padding: 3px;
border-radius: 5px;
}
.modal-header {
height: 24px;
line-height: 24px;
background-color: #ddd;
color: #222;
padding: 5px;
border-radius: 3px;
}
.modal-body {
height: 100px;
}
.btn-close {
width: 24px;
height: 24px;
float: right;
padding: 3px;
}
演示 Demo JS
draggable('#modal', '#modal .modal-header');
我们可以通过第二个参数指定不同的拖拽元素,比如可以指定整个 modal 为拖拽元素
draggable('#modal','#modal');
拖拽问题
整个拖拽功能并没有太大的问题,但是如果我们拖拽关闭按钮,仍然可以拖拽整个 modal,看起来不太和谐而且在某些情况下会影响功能,所以我们需要排除掉关闭按钮。
排除特定元素的方法
关于如何排除特定元素的方法,很多人会推荐阻止冒泡的方法,但是我试了很多次,这种方法是不行的,因为拖拽事件绑定在了 document
对象上。解决的方法就是在拖拽开始时添加限制条件,代码如下
...
var dragStart = function(e) {
var e = e || window.event;
e.preventDefault();
// 获取需要排除的元素
var elemCancel = $(e.target).closest(element);
// 如果拖拽的是排除元素,函数返回
if (elemCancel.length) {
return true;
}
isDragging = true;
startX = e.clientX;
startY = e.clientY;
left = $(modal).offset().left;
top = $(modal).offset().top;
}
...
为什么使用 closest()
方法呢?因为我们在排除特定元素的同时也要排除它的子元素。如果使用原生 JS 的话,需要添加获取子元素的方法。以下是完整代码:
/**
* [draggable 拖拽方法]
* @param {[type]} modal [移动元素]
* @param {[type]} handle [拖拽元素]
* @param {[type]} cancle [排除元素]
*/
var draggable = function(modal, handle, cancle) {
var isDragging = false;
var startX = 0,
startY = 0,
left = 0,
top = 0;
var dragStart = function(e) {
var e = e || window.event;
e.preventDefault();
// 获取需要排除的元素
var elemCancel = $(e.target).closest(cancle);
// 如果拖拽的是排除元素,函数返回
if (elemCancel.length) {
return true;
}
isDragging = true;
startX = e.clientX;
startY = e.clientY;
left = $(modal).offset().left;
top = $(modal).offset().top;
}
var dragMove = function(e) {
var e = e || window.event;
e.preventDefault();
if (isDragging) {
var endX = e.clientX,
endY = e.clientY,
relativeX = endX - startX,
relativeY = endY - startY;
$(modal).css({
left: relativeX + left + 'px',
top: relativeY + top + 'px'
});
}
return false;
}
var dragEnd = function(e) {
isDragging = false;
}
$(handle).on('mousedown', dragStart);
$(document).on('mousemove', dragMove);
$(document).on('mouseup', dragEnd);
}
上面的案例的 JS 修改如下:
draggable('#modal','#modal .modal-header', '#modal .btn-close');
总结
其实这个拖拽案例算是 jquery ui 拖拽功能的简单实现。仍然是之前的老话,实现一个功能并不困难,但是如果要把这个功能做好,我们需要考虑很多的细节,或许很多时候我们都把时间花费在调整细节上了。
- 解决mysql漏洞 Oracle MySQL Server远程安全漏洞(CVE-2015-0411)
- im4java包处理图片
- centOS7 mini配置linux服务器(五) 安装和配置tomcat和mysql
- RedisPool操作Redis,工具类实例
- centOS7 mini配置linux服务器(四) 配置jdk
- 老司机教你“飙”EventBus3
- Android listView异步下载和convertView复用产生的错位问题
- 实用Android 屏幕适配方案分享
- java-FFmpeg(一) 实现视频的转码和截图功能
- websocket(二) websocket的简单实现,识别用户属性的群聊
- websocket教程(一) 非常有趣的理解websocket
- 前端插件——头像截图上传插件的使用(带后台)
- 如何减轻ajax定时触发对服务器造成的压力和带宽的压力?ajax-长轮训
- Spark源码之Standalone模式下master持久化引擎讲解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 测试面试题集-Linux常用命令
- 「真香警告」鱼头手摸手教你在小程序里用composition-api
- 【技术文】SSL握手中的几个密码
- 分布式监控系统SkyWalking
- 文献笔记二十九:银合欢(Leucaena trichandra)线粒体基因组
- Docker Swarm群集配置实战——第一战
- 文献笔记五十:vcf2poptree根据vcf文件构建进化树的网页工具
- typescript基础篇(6):泛型
- Flutter 初学者必读的高级布局规则
- Docker Swarm群集配置实战——第二战
- Python 基础(五):序列
- OpenCV黑魔法之隐身衣 | 附源码
- SQL 统计用户留存
- 常用的前端JQ插件
- 面向对象编程(设计模式)需要遵循的 6 个基本原则