文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML5拖放内心的孩子

问HTML5拖放内心的孩子
EN

Stack Overflow用户

提问于 2014-03-13 05:50:43

回答 1查看 86关注 0票数 1

简单的问题是，当使用DnD启用一个元素时，如果您有一个内部子元素(例如一个字体很棒的元素)，那么如果单击内部元素，您似乎无法拖动父元素。这意味着当拖动元素时，用户必须单击子元素周围的填充。

以下是我的元素：

<a id="dragme" draggable="true"><i class="fa fa-search"></i></a>

以下说明拖动时的故障行为。当单击图标本身时，尝试并拖动。我正在使用Firefox最新版本，不确定在其他浏览器上是否会出现相同的行为。

http://jsfiddle.net/v6e5V/1/

关于如何处理这个问题，整个元素都是可拖动的，有什么建议吗？

谢谢

javascript

html

user-interface

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-03-13 06:03:30

解决方案是将pointer-events: none添加到子元素中，该元素将执行以下操作：

该元素从来不是鼠标事件的目标；但是，如果这些后代将指针事件设置为其他值，则鼠标事件可能以其后代元素为目标。在这种情况下，在事件捕获/气泡阶段中，鼠标事件将在该父元素的途中触发事件侦听器。

见更新的jsFiddle。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22380671

复制

HTML5 拖放

html5 容器电商 ios

拖放（Drag 和 drop）在WEB软件应用中是一种常见的操作，就是用户可以用鼠标点击对象以后拖到另一个位置。

十分钟空间

2022/08/17

1.6K0

HTML5 - 拖放

api python

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在H5中，任何元素都支持拖放，但是需要注意的是，有些元素存有默认行为(如a元素)，应当取消该元素的默认行为。

1338335202用户

2022/12/19

1.6K0

HTML5 进阶系列：拖放 API 实现拖放排序

html5 api

本文介绍了如何使用 HTML5 的拖放 API 实现一个简单的拖放排序功能。首先介绍了如何为元素设置拖放 API，然后通过一个示例展示了如何实现拖放排序。在示例中，使用了 dataTransfer 对象来存储数据，并通过 setDragImage() 方法来设置拖放图标。最后，指出了在 IE 和 iOS 上需要使用特定的插件来支持拖放排序。

IMWeb前端团队

2017/12/29

2K0

HTML5中的拖放功能

api html html5

每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗四处流荡的心定下来，一直走下去，加油，2021加油！欢迎关注加我vx:xiaoda0423，欢迎点赞、收藏和评论

达达前端

2021/02/02

2.8K0

HTML5 进阶系列：拖放 API 实现拖放排序

php

HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。

IMWeb前端团队

2019/12/04

1.6K0

HTML5 的拖放（实例：两个div之间拖放图片）

其他

首先，为了使元素（如本图片）可拖动，把 draggable 属性设置为 true ：

书童小二

2018/09/03

2.3K0

大数据带你看清孩子内心的四大渴望

大数据

不少人都说现在的孩子越来越难懂了。因为现在的孩子们都很有自己的想法的。你可知道你家孩子内心最渴望的是什么吗？也许读完这篇文章后，你可以和孩子说一声：我懂你～

IT阅读排行榜

2018/08/14

3430

理论 | HTML5 进阶系列：拖放 API 实现拖放排序

ios php

HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素都默认设置了 draggable 属性为 true，可直接拖放，如果不想拖放这两个元素，把属性设为 false 即可。拖放事件拖放事件由不同的元素产生。一个元素被拖放，他可能会经过很多个元素上，最终到达想要放置的元素内

用户1097444

2022/06/29

1.3K0

让Flash内心崩溃的HTML5小历史

flash html5 html 游戏

戳蓝字“IMWeb前端社区”关注我们哦！文/韩翔移动平台游戏制作人链接：http://www.techug.com/post/html5-history.html 1写在前面对于HTML5，在今天这个互联网时代，大部分人应该至少都听说过这个名字，或许很多人对HTML5的了解都起于一句话：FLASH杀手。 HTML5其实早已不是什么新鲜的事物了，其最初的雏形早在2004年就诞生了，虽然整个标准的制定过程极其漫长，然而即便只关注最终标准确定，也已经是2014年的事了。开始常规提问，什么是HTML5？

用户1097444

2022/06/29

4470

HTML5 拖放API简单介绍

数据库一体机 TData

1、给可以拖动的元素添加属性 draggable=‘true’，绑定dragstart事件，用于给传输对象保存内容，使用event.dataTransfer获取到数据传输对象，绑定selectstart事件，阻止默认行为，用于防止选中文本。

前Thoughtworks-杨焱

2021/12/07

1K0

HTML5 拖放(Drag和drop)

html5

在工作当中，我们会常常见到像UC浏览器的新选项卡一样的可以自定义拖拽摆放效果。大的像淘宝的装修，QQ空间装扮等，小到一些游戏等等随处可见拖放的使用场景。

业余草

2019/01/21

1.3K0

HTML5绘画与拖放事件

canvas html 图像处理 html5

在html5中出现了许多新的特性，绘画功能就是其中之一。由于html5新增的这些新特性，所以也在逐渐取代Flash，毕竟Flash比较占用内存，也经常性奔溃。

端碗吹水

2020/09/23

3.2K0

Html5 拖放上传图片

java https 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/117457.html原文链接：https://javaforall.cn

全栈程序员站长

2022/07/06

2.5K0

HTML5原生拖放事件的学习与实践

html

之前学习了 HTML5 的拖放事件，开发中也用到了拖拽组件。为了厘清整体的逻辑，专门做了一个小例子。

心谭博客

2020/04/20

1.2K0

vue 中基于html5 drag drap的拖放

编程算法

开始的我，so easy！通过绑定元素的mousedown 事件，监听鼠标的mousemove，和mouseup 事件，于是我轻松实现了同一区域内元素可以拖着跑，上代码！

青梅煮码

2023/03/02

1.5K0

【HTML5】逐步分析如何实现拖放功能

编程算法腾讯云测试服务 html5

拖放就是通过鼠标放在一个物体上，按住鼠标不放就可以把一个物体托动到另一个位置。其实我们平时一直都有接触，如图

@零一

2021/01/29

1.6K0

HTML5 拖放API与Vue.js实战

api

拖放 API 将可拖动元素添加到 HTML，使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。

疯狂的技术宅

2021/01/13

4.4K0

第90天：HTML5中文件API和拖放操作

其他

一、文件API File API：提供客户端本地操作文件的可能 multiple是让文件域可以多选 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文件API</title> 6 <link rel="stylesheet" href="bootstrap.css"> 7 </head> 8 <body> 9 <form action=""> 1

半指温柔乐

2018/09/11

7410

拖放奥秘

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} #div1{ width: 200px;height: 200px;background: black;position: absolute;left: 50%;top: 50%; margin: -10

贵哥的编程之路

2020/10/28

8800

你的孩子不是你的“孩子”

未成年人保护

- 结语 - 饭圈乱象、网络沉迷、童星招募、虚拟恋人、设圈不理性消费、游戏代解防沉迷… 随着孩子对网络的依赖不断加深，他们遇到网络风险的可能性也越大。很多时候，网络暗藏的风险正好就是家长的盲点。对于家长来说，应该及早帮助孩子建立隐私保护意识，并教会他们识别网络风险，在发现异常时，尝试去理解孩子内心深层的情感需求，让孩子感受到足够的爱和信任。对于孩子来说，规避网络风险需要做到“三不”，不轻信网络上的陌生人，不发送自己的隐私，不轻易转账。近两年来，国家各级主管机关对未成年人保护工作高度重视，从2021年6

腾讯举报中心

2022/06/01

3810

相似问题

HTML5拖放不会拖放

HTML5拖放

拖放HTML5

拉斐尔内心的光芒？

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问HTML5拖放内心的孩子
EN