HTML5学习笔记（五）拖拽操作

最新推荐文章于 2025-06-15 18:02:13 发布
最新推荐文章于 2025-06-15 18:02:13 发布
阅读量2.4k 收藏 6
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML5 文章标签： H5拖拽操作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shilipeng666/article/details/83932972
本文介绍了HTML5中的拖拽功能，包括拖拽效果的实现方法，如原生DOM、jQuery插件和HTML5自带的拖拽特性。详细讲解了HTML5拖拽涉及的源元素与目标元素事件，如dragstart、dragend、dragenter、dragover、drop等，并解释了dataTransfer对象的作用，用于在拖放过程中存储和传递数据。还提到了setDragImage方法，用于修改拖放时的鼠标跟随图片效果，并通过实例进行了演示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、拖拽效果

           要拖拽的文件是什么? - 源元素

           要拖拽到哪里去? - 目标元素

    目前实现拖拽效果的方法

           使用原生DOM就能实现 - 最麻烦

           使用jQuery的插件 - 拖拽效果

           HTML5中提供的拖拽功能

二、HTML5中拖拽

     源元素事件

         dragstart - 当鼠标开始拖放时被触发

         drag - 当鼠标拖放过程中,类似于mousemove事件

         dragend - 当鼠标结束拖放时被触发

   

最低0.47元/天 解锁文章

200万优质内容无限畅学
html5实现元素拖拽,实现元素拖拽的两种方式
weixin_32142311的博客
06-19 1911
第一种方式：使用h5的api datatransfer实现思路：1.为将要拖拽的元素设置允许拖拽，并赋予dragstart事件将其id转换成数据保存；2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置，并赋予drop事件进行元素的放置。代码如下：.box1 {width: 100px;height: 100px;border: 1px black solid;margin-...
HTML5 video标签（播放器）学习笔记（二）:播放控制
09-28
这篇学习笔记主要探讨了如何通过JavaScript对`<video>`标签进行播放控制，包括获取影片总时长、播放与暂停、获取已播放时间和设置播放点以及音量的获取和设置。 首先，获取影片总时长是非常基础且重要的一步。通过`...
HTML5实现拖放
上庸者-不服周
09-30 4469
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
HTML5 教程第13节：拖放 API（Drag & Drop）
最新发布
silverclayz的技术分享
06-15 843
HTML5拖放API（Drag & Drop）为开发者提供了原生实现元素拖拽交互的能力。通过设置draggable="true"属性，使元素可拖动，并通过一系列事件（dragstart、dragover、drop等）控制拖放流程。核心DataTransfer对象负责在拖拽源和目标间传递数据，支持设置/获取数据格式。该API可实现文件拖放上传（结合File API读取文件）和交互式排序组件等功能，其中排序示例展示了如何通过事件监听动态调整元素位置。
H5中实现拖拽技术
nihaio25的博客
09-14 8768
1.在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。 拖动事件：dragstart、drag、dragend 放置事件：dragenter、dragover、drop 拖拽事件流：当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发dragstart->drag->dragenter->dragover->drop->dragend 2.在拖拽事件中，我们可以通过DataTransfer来实现数据交互，通过even
HTML5属性-拖拽
2301_76760417的博客
01-16 1826
拖拽（drap && drop）在我们平时的工作中，经常遇到。表示为抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。
H5_元素拖放(拽)
qq_42838139的博客
04-06 573
效果图 HTML代码 html代码很简单，就是两个盒子里面，每个盒子里面放了两个p标签。每个p标签里面都有一个draggable属性，当draggable属性为true时，就是p标签可被拖拽。这个属性加在需要拖动的元素上面。 CSS代码 css代码简单，单纯的给盒子和p标签样式 JavaScript代码 拖拽元素：指的是被拖拽的元素 目标元素：指的是需要拖拽到某...
html5中canvas学习笔记.doc
12-08
HTML5中的Canvas是用于在网页上进行绘图的一个HTML元素，它提供了一个可以通过JavaScript进行图形绘制的位图区域。通过Canvas API，开发者可以绘制图形、图片、动画等视觉元素。在HTML5引入Canvas之前，要在网页上...
HTML5第二部分笔记.docx
07-08
在HTML5中，拖放功能（Drag and Drop）是一个强大的特性，它允许用户在网页上抓取元素并将其移动到其他位置，从而提供了一种直观的交互方式。在HTML5之前，实现这样的功能通常需要复杂的JavaScript代码，但HTML5将...
HTML5 Canvas学习笔记(1)处理鼠标事件
08-06
这篇“HTML5 Canvas学习笔记(1)处理鼠标事件”着重讲解了如何利用Canvas API来监听和响应鼠标的点击、移动等事件。 Canvas API提供了几个关键的方法来处理鼠标事件，包括`addEventListener`用于绑定事件处理函数，`...
HTML拖动
qzcrystal的博客
08-30 245
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt; &lt
HTML5实现图片拖动，旋转，放大，拉伸等特效
11-04
HTML5实现图片拖动，旋转，放大，拉伸等特效 效果详情参考http://www.xwcms.net/webAnnexImages/fileAnnex/20131031/91857/index.html
HTML5 – 拖拽功能
03-21
NULL 博文链接：https://wjlgryx.iteye.com/blog/974247
【JS】H5为元素新增的属性draggable（拖拽）
千里之行，始于足下
03-24 1188
/被拖物在释放区放下时触发（阻止ondragover的默认行为，ondrop事件才起作用）/*被拖物在释放区内移动，释放区的状态*//*被拖拽时原本的地方不显示拖拽物*///拖动过程中原始位置的被拖物不显示。//被拖物进入释放区占据的空间时触发。/*被拖拽时被拖拽物的状态*///被拖物在释放区内移动时触发。//被拖动元素进入放置目标时。//被拖物离开释放区时触发。//每个释放区都有的事件。//被拖动元素放入目标时。/*被拖拽物div*//*释放区div*///被拖物-拖动开始。//被拖物-拖动结束。
HTML拖拽
m0_74331185的博客
12-06 2044
HTML拖拽
H5中拖放效果
梁山伯_的博客
08-30 2935
代码附上： #div1 { width:198px;  height:66px; padding:10px; border:1px solid #aaaaaa; } function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setDat
H5拖拽事件
chiniue1759的博客
11-23 198
H5中拖拽属性： draggable： auto | true | false 拖动事件： - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - drag 在元素被拖动时触发 释放区事件： dragenter 被拖动元素进入到释放...
H5组件拖拽与放置
butcher的博客
11-13 3167
1、效果 为了便于理解原理，这里举例在组件列表中拖拽一个按钮到容器中生成一个新按钮的案例，代码尽可能简洁，主要是说明清楚如何实现的拖拽，如下： 2、原理 使用H5自带的拖拽api实现组件拖拽生成，关键的点如下： 1、被拖拽的目标组件（以下简称目标）上需要添加一个属性draggable="true" 例如需要让一个按钮可以拖拽： <button id="btn" type="button" draggable="true">按钮</button> 2、需要了解以下几个监听事件 用于
html5 拖动效果,HTML5前端技术教程：H5拖放
weixin_29521249的博客
06-03 596
原标题：HTML5前端技术教程：H5拖放提到拖拽，我们都很熟悉，那么拖放呢？一字之差，代表的意义是不一样的，拖拽就是拉着走，拖放就是有拖，有放，我们都知道原生 JS 拖拽效果的缺点：1. 代码相对复杂与冗余2. 仅限于在浏览器内的元素间拖放3、不能实现跨页面的拖放所以H5就出现了拖放技术，与 JS 原生相比 HTML5 拖放的优势： H5拖放技术，drag&drop，对于浏览器的支持性：I...
HTML5+CSS3+JS前端开发学习笔记
"这是一份综合性的Web前端学习资料，涵盖了HTML5、...这份学习笔记为初学者和进阶者提供了一个全面的Web前端学习平台，从基础知识到高级特性，从理论到实践，帮助读者掌握前端开发的核心技能，并了解HTML5带来的创新。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值