关于 JS 拖拽功能的冲突问题及解决方法
前言
我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考。本文主要介绍解决这种冲突的方法,其实就是事件绑定的时机问题。
问题来源
这个问题是在类似如下 CodePen 例子中发现的,在有拖拽功能的页面中添加一个原生 input range 元素,可以发现 input range 的拖拽失效了。
See the Pen drag with conflict issue by Zongbin (@nzbin) on CodePen.
让我们看一下拖拽方法代码:
var draggable = function(modal, handle) {
...
$(handle).on('mousedown', dragStart);
$(document).on('mousemove', dragMove);
$(document).on('mouseup', dragEnd);
}
几乎网上的大部分拖拽案例都是上面这种绑定事件的方法。起初以为是 jQuery 事件绑定的问题,其实完全不相关,使用原生 JS 同样会遇到这种问题。
再看一下拖拽的事件绑定,很明显,在 document 上绑定的事件和 input range 的拖拽事件冲突了。其实,document 作为最上层的节点,它上面不应该绑定其它事件(事件代理除外),如果绑定,必须是临时性绑定,否则一定会造成冲突。
解决方法
知道问题所在之后,解决方法也非常简单,其中参考了 jQuery UI 的处理方式。
我们可以在拖拽开始的时候绑定 document 的事件,然后在拖拽结束的时候移除 document 的事件。
var draggable = function(modal, handle) {
...
var dragStart = function(e) {
...
$(document).on('mousemove', dragMove)
.on('mouseup', dragEnd);
}
... var dragEnd = function(e) {
$(document).off('mousemove')
.off('mouseup');
...
} $(handle).on('mousedown', dragStart); }
下面 CodePen 中的 input range 已经可以正常拖动了。
See the Pen drag with conflict issue fixed by Zongbin (@nzbin) on CodePen.
总结
我们可以通过控制台的 Event Listener 查看绑定的事件,在平时的工作中,切记不要污染全局的默认事件。一般情况下,工作中并不会遇到本文所说的这一情况,但是如果真的碰到了,需要知道问题的所在。
关于 JS 拖拽功能的冲突问题及解决方法的更多相关文章
- 原生js拖拽功能制作滑动条实例教程
拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...
- 关于js拖拽功能,拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题
被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...
- chrome无法拖拽离线安装CRX格式插件解决方法
原文:http://chromecj.com/utilities/2018-09/1525.html 摘要 : chrome 67版本后无法拖拽离线安装CRX格式插件的解决方法 有一部分网友反映子 ...
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
- Js元素拖拽功能实现
Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
- vuejs2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
- vue2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
- js进阶 12-17 jquery实现鼠标左键按下拖拽功能
js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...
- (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
随机推荐
- MyBatis 查询示例
环境搭建 数据库schema 1)datasource.xml配置 <?xml version="1.0" encoding="UTF-8"?> & ...
- servlet多线程问题
Servlet本身是单实例的,这样当多个用户同时访问某个Servlet时,会访问该唯一的Servlet实例中的成员变量,如果对成员变量进行写入工作,那就会导致Servlet的多线程问题,即数据不一致. ...
- Python使用requests模块访问HTTPS网站报错`certificate verify failed`
使用requests模块访问HTTPS网站报错: SNIMissingWarning: An HTTPS request has been made, but the SNI (Subject Nam ...
- AI_神经网络监督学习
神经网络的神奇之处在哪? 所有神经网络创造出来的价值,都是由一种机器学习,称之为监督学习, 下面这些例子神经网络效果拔群,通过深度学习获利最多的是在线广告 技术的进步来源于计算机视觉和深度学习 例如: ...
- 微信小程序实战:天气预报
接触微信小程序也有一段时间了,以天气预报练一下手. 主要实现了以下功能: (1) 首页图标式菜单,便于以后扩展功能 (2)首页顶部滚动消息 (3)页面右上角三点菜单转发功能,便于小程序的传播 (4)天 ...
- 企业级分布式存储应用与实战FastDFS实现
FASTDFS是什么 FastDFS是由国人余庆所开发,其项目地址:https://github.com/happyfish100 FastDFS是一个轻量级的开源分布式文件系统,主要解决了大容量的文 ...
- VisionPro随笔-Visionpro空间字符的含义
在visionpro中名字空间是一个非常重要的概念.简单的说就是在图像中的一个特殊坐标系. 下面说下名字空间中一些固定的字符的特殊含义: 1)“.”=这个表示使用输入图像的当前名字空间.即cogima ...
- jumpserver v0.4.0 基于 CenOS7 的安装详解
标签(linux): jumpserver 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 笔者已经弃用Jumpserver,并自已开发了shell跳板机. sh ...
- Spring AOP小记
一.概述 在通常的开发过程中,我们调用的顺序通常是controller->service-dao,其中,service中包含着太多的业务逻辑,并且还要不断调用dao来实现自身的业务逻辑,经常会导 ...
- 企业级Docker私有仓库之Harbor部署(http)
部署环境 Centos7.3 x64 docker-ce-17.06.0 docker-compose-1.15.0 Python-2.7.5(系统默认) Docker及Docker-compose安 ...