@dragstart 与 @mousedown拖拽事件

最新推荐文章于 2024-03-17 21:10:14 发布

原创

最新推荐文章于 2024-03-17 21:10:14 发布 · 3.1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

想要实现拖拽效果，可以用@dragstart和 @mousedown两个方法，但是真要使用时，用哪一个呢？具体请看以下两者的区别。

@dragstart使用场景：

有明确的拖拽区域与界限
拖拽灵活度要求不高
拖拽时有明确的数据传递需求

drag推拽事件配置：

发生在拖动元素上的事件

@dragstart：拖拽开始事件，可绑定于被拖拽元素上；
@dragend：拖拽结束事件，可绑定于被拖拽元素上；

@drag：拖拽过程中一直触发；

事件名	触发时机	触发次数
dragstart	当拖动开始时触发一次	1
drag	拖动开始后反复触发	n
dragend	拖动结束后触发一次	1

发生在目标元素上的事件

@dragover：拖拽持续移动事件，建议绑定于可拖放区域（下方灰色块）；
@dragenter：进入拖放区域，建议绑定于可拖放区域（下方灰色块），该事件仅在进入拖放区域时触发，在其内部移动时不触发，离开某一可拖放区域后再进入时会再次触发；

事件名触发

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

榴莲妹妹是程序媛

关注关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

js拖拽事件详解

weixin_68658847的博客

11-11

6629

js拖拽事件详解

html5实现拖放以及mouse事件实现简单拖拽

Mentina的小屋

03-13

4039

春困夏乏秋打盹，最近懒癌要犯了，为了督促自己学习，小生制定了一个计划——每天收集/记录/学习一个小技巧~~~ 今天的小技巧如题，html5实现拖放以及利用mouse事件实现简单拖拽，本文将依次介绍，若有不妥之处，还望这位看官留言指正~~~实例参考博客：http://blog.csdn.net/baidu_31333625/article/details/53811510//=====...

参与评论您还未登录，请先登录后发表或查看评论

HTML5实战与剖析之原生拖拽(二拖拽事件dragstart、drag和dragend)

梦龙小站

03-04

9077

通过拖拽事件，咱们就可以控制拖拽很多东西了。其中什么元素或者是哪里发生了拖拽事件是最关键的。有些事件是在被拖动的元素上触发，有些事件是在放置目标上触发的。拖动某元素时候，触发的事件有：dragstart事件、drag事件和dragend事件。

HTML5 拖放Drag和drop用法以及事件介绍

weixin_50756332的博客

03-23

2885

这里是一个拖拽小案例的实现

vue用dragstart实现拖拽

热门推荐

浮游的博客

03-12

1万+

下面是HTML5的拖拽事件 dragstart：开始拖元素触发，作用于拖拽元素 dragenter：元素拖进可drop元素（绑定drop事件的元素）时触发，作用于目标元素 dragover：当元素拖动到drop元素上时触发，作用于目标元素 drop：当元素放下到drop元素触发，作用于目标元素 dragleave ：当元素离开drop元素时触发，作用于目标元素 drag：每次元素被拖动时会触发，作用于目标元素 dragend：放开拖动元素时触发，作用于目标元素完成一次拖放的事件过程是： dragstart

dragstart js_EaselJs canvas dragstart事件不冒泡到父级

weixin_39682944的博客

12-23

148

I have a number of canvas elements, which need to be draggable. (not elements within the canvas element, i mean the actual canvas DOM node)The code looks like thisIf I just have a regular canvas eleme...

drag事件

qq_41562817的博客

12-04

846

参考： https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dragover_event。5、dragover事件：容器监听到有源一直在时持续触发。1、dragstart事件：源被认定开始拖拽的时候触发。4、dragenter事件：容器监听到有源进入时触发。6、dragleave事件：容器监听到有源离开时触发。2、drag事件：源在被拖拽的时候持续触发。7、drop事件：容器监听到有源降落时触发。

利用onmousedown和dragstart分别实现网页拖拽效果

06-09

564

平常我们写网页拖拽的时候，一般都是通过mousedown+mousemove+mouseup这种方式来模拟出拖拽的效果的，今天看书的时候，偶然看到原来浏览器早就支持了原生的拖拽事件，那就是dragstart+drag+dragend这一套东西。不难理解，看字面意思就知道这是开始拖拽+拖拽+完成拖拽分别触发的事件。用这种原生的拖拽方式未必会比监听鼠标的方式好（特别是扩展性不够强），...

用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)

最新发布

我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。

03-17

1000

将数组指定索引位置的元素移动到目标索引位置，且不改变其他元素原本的顺序，注意这个不是对调元素位置，是移动某一个元素位置不影响其他元素顺（使用场景：拖拽改变数据的顺序，点击上下左右箭头移动元素顺序）-优快云博客。【代码】将数组指定索引位置的元素移动到目标索引位置（使用场景：拖拽改变数据的顺序，点击上下左右箭头移动元素顺序）

js解决事件冲突

11-08

- `eventIdx`：用于记录当前事件的类型（0为`mousedown`，1为`dragstart`，2为`mouseup`，3为`dblclick`）。 - `timer`：定时器变量，用于检测用户是否进行了长时间的按下操作。 - `button`：记录触发事件的鼠标...

html5 原生拖拽,运用HTML5原生拖动事件（drag）实现拖动效果

weixin_35812176的博客

06-03

696

拖动效果相信很多朋友都自己写过，不管你用原生JS还是Jquery要实现起来也很简单，但是今天我想介绍的是运用HTML5标准中定义的原生拖动事件实现拖动效果。一、背景：其实说是HTML5标准定义，其实最早在IE4中就有拖放功能的API，只是在IE4中，网页中只有两种对象可以拖放：图像和某些文本。并且在IE4中唯一有效的放置目标是文本框。到了IE5.5，拖放功能得到了扩展，让网页中的任何元素都可以拖放...

js dragstart

05-17

`dragstart` 是一个 HTML5 的事件，用于在拖拽开始时触发。它通常与 `drag` 和 `dragend` 事件一起使用，用于实现拖拽功能...在实现拖拽功能时，`dragstart` 事件通常会与 `mousedown` 或 `touchstart` 事件一起使用。

dragstart js_jQuery拖拽插件drag.js

weixin_42164702的博客

12-23

441

插件描述：drag 拖动 her拖动更新时间：2017/7/19 下午9:43:23更新说明：看大家的需要添加，xy坐标回调，主要是添加此功能，另外代码简化了一部分使用方法：$(element).myDrag({parent:'parent',//定义拖动不能超出的外框,拖动范围randomPosition:true,//初始化随机位置direction:'all',//方向handler:...

js实现使用鼠标拖动页面元素

weixin_42965828的博客

01-14

685

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标拖动元素</title> <link rel="icon" href="../../7952/h1.ico"> <script type="text/javascript" src="../../0js/tool.js"></scri

dragstart js_js --拖拽

weixin_34230075的博客

12-23

524

拖拽即通过鼠标按下，将要拖拽的目标放置到某一个位置。一般拖拽编写的步骤:1.将要拖放的元素设置为可拖放的，即，将draggable设置为true.2.重写放置目标元素的默认行为3.编写事件拖放事件dragstart 鼠标按住拖放目标时drag 开始移动时dragend 拖放结束(鼠标抬起)放置事件dragenter 进入放置目标dragover...

dragstart js_原生JS快速实现拖放实例效果与解析

weixin_42347882的博客

01-07

251

点击上方 "前端技术精选"关注，星标或者置顶17点30分准时推送，第一时间送达编辑：前端妹 |作者：MudOnTire来自：segmentfault.com/a/1190000019554950前端技术精选(ID：FrontEndTech)第 99 次推文图源：百度上一篇：玩转 CSS 变量，看了都说好～正文放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用...

vue拖拽不触发解决方式 @dragstart @drop

斯幽柏雷科技

01-01

6540

解决VUE拖拽事件不触发的各种问题.

基于原生JS封装的Modal对话框插件

m0_37503052的博客

08-17

999

基于原生JS封装Modal对话框插件原生JS封装Modal对话框插件，个人用来学习原理与思想，只有简单的基本框架的实现，可在此基础上添加更多配置项 API配置 //基本语法 let modal = ModalPlugin({ //提示的标题信息 title:'系统提示', //内容模板字符串 /模板字符串/DOM元素对象 template:null, //自定义按钮信息

dragstart&dragover&drop 拖放图片到区域

weixin_43297321的博客

03-07

1654

知识点： dragstart事件：当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发。 dragover事件：当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件(每几百毫秒触发一次)；这个事件在可被放置元素的节点上触发。 drop 事件：当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时，drop 事件被抛出。 <!-...