JavaScript使用drag事件

前言

复习JS时突然想到drag事件，便想尝试。

开始我的代码是这样

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.dragger {width: 100px;height: 100px;line-height: 100px;text-align: center;border: 1px solid #ccc;border-radius: 50%;user-select: none;}</style>
</head><body><div class="dragger">拖动我！！</div><script>let dragger = document.querySelector('.dragger')dragger.addEventListener("dragstart", (e) => {console.log(e)console.log('start')})dragger.addEventListener('drag', (e) => {console.log('move')})dragger.addEventListener("dragend", () => {console.log('end')})</script>
</body></html>

鼠标拖动后，发现drag事件并没有触发。

经过测试后发现，drag事件触发需要与元素的 draggable="true"配合使用，也就是说，元素上必须包含draggable属性，并且是true

JavaScript使用drag事件相关推荐

Javascript函数和事件
一.默认函数 JavaScript提供了一些默认的函数编码函数escape():将非字母.数字字符转换成ASCII码译码函数unescape():将ASCII码转换成字母.数字字符求值函数eva ...
javascript常用的事件
javascript常用的事件目标:本章主要讲解一些日常学习中常用的事件种类,主要分为五种事件,分别为鼠标事件.键盘事件.表单事件,页面事件,监听器 1.鼠标事件 1.onclick 鼠标点击触发事 ...
浅谈JavaScript中的事件
事件在javascript中是响应用户的一种基本操作,本文列举了两种javascript中的事件模型及其绑定的方式,希望能对你的学习带来一点帮助.这些都是非常基础的但或许其中有你所遗漏.(以下事件均针 ...
JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript点击事件-一个按钮触发另一个按钮
<input type="button" value="Click" id="C" οnclick="Go();" ...
【JavaScript】JS事件机制学习
常用的事件通过事件机制,达到与用户的交互,与java的swing交互类似. 主要是结合js的函数使用. 当你添加一个事件之后没有达到想要的效果时,就要检查一下是不是给HTML标签添加了合适的事件,以 ...
添加javascript代码:_javascript事件？你又了解多少呢
javascript事件小编:阳光就好 HTML 事件是发生在 HTML 元素上的事情. 当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件. HTML事 ...
JavaScript对象与事件
JavaScript中常用对象 <!DOCTYPE html> <html><head><meta charset="utf-8"> ...
html鼠标响应事件吗,学习JavaScript鼠标响应事件
本文为大家分享了一个简单的鼠标模拟案例,供大家参考,具体实现内容如下如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一个透明区域里绑定捕抓的位移,这样就能在模拟的透明区域里实现鼠标滑动 ...
javascript监听键盘事件 - 如表单enter回车提交
javascript监听键盘点击时间,比如:enter回车表单提交.禁止F5刷新.禁用鼠标右键等等本文仅简单做个介绍,权当抛砖引玉了:如果朋友们有更好的建议或者意见,欢迎留言评论. 代码如下: &l ...

JavaScript使用drag事件

前言

JavaScript使用drag事件相关推荐

最新文章

热门文章