HTML5 拖拽

最新推荐文章于 2022-12-02 14:41:10 发布
原创 最新推荐文章于 2022-12-02 14:41:10 发布 · 361 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #前端 #html

本文介绍了HTML5中拖放功能的基本用法，包括使元素变得可拖动的`draggable`属性，以及在拖放过程中涉及的一系列事件：`ondragstart`、`ondrag`、`ondragend`、`ondragenter`、`ondragover`、`ondragleave`和`ondrop`。特别强调了在实现`ondrop`事件时，必须在`ondragover`事件中阻止浏览器默认行为的重要性。

拖放是HTML5标准的组成部分

链接和图片默认时可拖动的，但是其他元素如果需要可拖动，需要设置draggable属性为true

----在拖拽目标上触发的事件

ondragstart 用户开始拖动元素时触发

ondrag 元素正在拖动时触发

ondragend 用户完成元素拖动后触发

----在释放目标上触发的事件

ondragenter 当鼠标拖动的对象进入目标容器范围内时触发

ondragover 当鼠标拖动的对象在目标容器范围内拖动时触发

ondragleave 当鼠标拖动的对象离开目标容器范围内时触发

ondrop 当鼠标拖动的对象在目标容器范围内，释放鼠标按键时触发

使用ondrop事件必须要先监听ondragover事件，然后需要在ondragover监听事件中阻止浏览器默认事件，否则ondrop事件监听不生效

基于浏览器的组态绘图平台、可视化前端开发平台
LOVEFOREVE的专栏
03-26 3840
1、支持chart 、svg、支持canvas、支持html、支持vue element、支持数据动画、渐进动画、闪烁动画、线性动画、3D管道、3D管道水流、蓄水池水量及动态控制 2、支持动态数据绑定、动画绑定、直线、曲线、二次贝塞尔曲线、圆、弧线、长方形、扇形、图片等 ...
HTML5拖拽功能实现（步骤进行）
qq_37904799的博客
04-03 6200
问题：突然奇想，想在我的电影网上加一个收藏（类似于购物车的东西），可以通过拖拽图片进行添加前提：需要了解HTML5中国Loacl Strorage（当然，其他的web存储也行，我用的是Local Stroage）解决：这里主要重点强调关于进行拖拽功能的细节，具体html和css就自己慢慢弄吧首先这里先是对收藏按钮进行点击显示新的div框（存放收藏的电影），二次点击隐藏div框，这里不做过多介绍为可...
如何在Html5中实现拖拽
lumot的博客
09-20 713
拖放 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 实例 <!DOCTYPE HTML> <html> <head> <script...
html5拖拽状态,html5中的拖拽功能
weixin_42447681的博客
05-31 368
Document* {padding: 0;margin: 0;}.div1,.div2,.div3 {margin: 0 20px;float: left;width: 200px;height: 200px;border: 1px solid #000;}div{display: flex;flex-direction: column;align-items: center}p{display...
拖拽布局插件
05-06
拖拽布局插件 拖拽 布局 手机拖拽
html组态图动态拖拽,基于HTML5的Drag and Drop生成图片Base64信息
weixin_28331555的博客
06-19 506
HTML5的Drag and Drop是很不错的功能，网上使用例子较多如http://html5demos.com/drag，但这些例子大部分没实际用途，本文将搞个有点使用价值的例子，通过Drag and Drop生成图片的Base64的字符串信息。使用Base64方式的图片有诸多好处，可将多个图片信息整合到单个js文件避免多次http请求，可以避免WebGL例子跨域访问的安全限制无法本地文件...
html5 拖拽 父元素,拖动子元素时会触发父元素的“ dragleave”
weixin_36438124的博客
06-21 1270
小编典典我终于找到了我满意的解决方案。我实际上找到了几种方法来做自己想做的事，但是没有一种方法能像当前解决方案一样成功。在一种解决方案中，由于在#dropzone元素上添加/删除了边框，我经常出现闪烁现象。如果将鼠标悬停在浏览器之外，则不会删除它。无论如何，我最好的hacky解决方案是这样的：var dragging = 0;attachEvent(window, 'dragenter', fun...
HTML5拖拽功能实现的拼图游戏
12-13
具体代码如下所示：   <!--代码如下，最下面给出了我测试用的9张250*250的图片切片-->...drag拖拽</title> <style> .box{ float: left; } img{ width: 150px; height:150px; } #puzzle{
html5 拖拽上传图片实例演示
09-28
HTML5 拖拽上传图片是一种用户友好的交互方式，允许用户通过拖放操作将本地图片上传至服务器。这一功能的实现主要依赖于HTML5的File API和Drag and Drop API。下面我们将详细讨论这两个API以及如何结合JavaScript...
html5 拖拽交换
04-27
在"html5 拖拽交换"这个主题中，我们将深入探讨HTML5拖放API的基本概念、实现方式以及如何实现元素间的交换。 1. **HTML5拖放API**：HTML5的拖放API提供了一套事件和接口，使得开发者能够创建拖放功能的网页应用。...
html5拖拽排序多图片上传插件特效源码
最新发布
04-25
本文所涉及的html5拖拽排序多图片上传插件特效源码，是基于HTML5的Drag & Drop API开发的，允许用户通过拖拽的方式上传图片，并且支持在上传后对图片进行排序管理。 此插件的主要功能可以分为以下几个方面： 1. ...
精选资源
HTML5拖拽效果Demo
05-01
这个“HTML5拖拽效果Demo”展示了一个使用HTML5和JavaScript实现的简单拖放操作，使得用户可以方便地将元素从一个区域拖动到另一个区域。这个功能在构建交互式网页应用时非常实用，比如文件上传、图片排序或者构建可...
HTML5 Drag and Drop
u013960094的专栏
06-12 972
1. make an Element Draggable 首先把希望拖动的元素的 draggable 性质设为 true 2. specify what should happen when the element is dragged 然后指定当这个元素被拖拽时应该发生的行为。把这个处理函数绑定到 ondragstart 性质里 function drag(ev) {
html5 拖拽 父元素,javascript – 如何实现拖放,拖动子元素将拖动整个父元素
weixin_39900045的博客
06-21 752
您可以将ondragstart事件的处理程序设置为false,如下所示： CaptionXAdd Media+function drag(e) {console.log(e);}var images = document.getElementsByTagName('img');for(i = 0 ; i < images.length; i++)images[i].ondrag...
HTML5高阶实例之Drag&Drop
万少博-FE
03-17 601
更新日期：2018年3月27日21:53:27 1、原生拖放-概述 对于拖放事件而言，默认情况下，浏览器不会在拖动期间改变被拖动元素的外观，但你可以自己修改。不过，大多数浏览器会为正被拖动的元素创建一个半透明的副本，这个副本始终随着光标移动。如下图所示。 &amp;amp;amp;amp;gt; 默认情况下，图片、链接和文本是可以拖动的，也就是说img标签、a标签和选中的文字可以被拖动。 ...
点击子元素可移动整体元素(子div带动父div移动)
qq_42999256的博客
12-02 760
需求为给某个弹窗增加拖动效果，给整个弹窗加会影响弹窗内的滑动条滑动，因此给头部元素增加一个拖动监听来带动整个元素移动。
HTML5--拖拽API(含超经典例子)
热门推荐
冯小东
11-18 5万+
一、关于拖拽API 拖拽API是HTML5的新特性，相对于其他新特性来说，重要程度占到6成，实际开发中使用比例占到3成，学习要求个人认为是达到掌握即可的程度。 二、什么是拖拽和释放？ 拖拽：Drag 释放：Drop 拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了 三、什么是源对象和目标对象？ 源对象：指的是我们鼠标点击的
html5拖拽
03-21
### HTML5 拖拽 API 使用教程 HTML5 拖拽 API 提供了一种简单的方式来实现网页上的拖拽功能，相比传统的基于鼠标事件的方法更加高效和直观。以下是关于如何使用该 API 的详细介绍。 #### 1. 启用元素可拖拽属性 为了使某个元素可以被拖拽，需要为其设置 `draggable="true"` 属性[^3]。需要注意的是，默认情况下 `<a>` 和 `<img>` 元素已经具备拖拽能力。 ```html <div id="dragItem" draggable="true">这是一个可拖拽的元素</div> ``` #### 2. 处理拖拽过程中的事件 HTML5 拖拽 API 定义了一系列用于处理不同阶段的事件[^4]： - **`dragstart`**: 当用户开始拖拽时触发。 - **`drag`**: 在拖拽过程中持续触发。 - **`dragenter`**: 被拖拽的元素进入目标区域时触发。 - **`dragover`**: 被拖拽的元素在目标区域内移动时触发。 - **`dragleave`**: 被拖拽的元素离开目标区域时触发。 - **`drop`**: 用户释放拖拽动作并将元素放置到目标位置时触发。 - **`dragend`**: 拖拽操作完成时触发。 下面是一个简单的示例来展示这些事件的应用： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Drag and Drop Example</title> <style> #dragItem { width: 100px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px; } #dropZone { border: 2px dashed gray; width: 200px; height: 200px; margin-top: 20px; text-align: center; line-height: 200px; } </style> </head> <body> <div id="dragItem" draggable="true">拖我</div> <div id="dropZone">放下到这里</div> <script> const dragItem = document.getElementById('dragItem'); const dropZone = document.getElementById('dropZone'); // 设置拖拽开始时的行为 dragItem.addEventListener('dragstart', (event) => { event.dataTransfer.setData("text/plain", event.target.id); console.log('Drag started'); }); // 阻止默认行为以便允许放置 dropZone.addEventListener('dragover', (event) => { event.preventDefault(); }); // 放下时的操作 dropZone.addEventListener('drop', (event) => { event.preventDefault(); const data = event.dataTransfer.getData("text/plain"); event.target.appendChild(document.getElementById(data)); console.log('Dropped'); }); </script> </body> </html> ``` 在这个例子中，通过监听 `dragstart`, `dragover`, 和 `drop` 事件实现了基本的拖放功能。特别注意，在 `dragover` 中调用了 `preventDefault()` 方法以防止浏览器执行其默认行为，从而确保 `drop` 事件能够正常生效[^5]。 #### 3. 数据传输机制 在拖拽的过程中可以通过 `dataTransfer` 对象传递数据。上述代码片段展示了如何利用它存储并获取源元素 ID 来决定最终的位置调整[^1]。 --- ### 注意事项 尽管 HTML5 拖拽 API 功能强大，但在实际开发中有几点需留意： - 浏览器兼容性和某些特定场景下的表现差异可能会带来挑战。 - 默认样式可能不符合需求，因此通常还需要额外 CSS 进行美化。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值