HTML5拖拽效果

最新推荐文章于 2021-06-19 09:48:15 发布
最新推荐文章于 2021-06-19 09:48:15 发布
阅读量414 收藏
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyx_lyq/article/details/52185148
版权

drag and drop(拖拽)

拖拽元素事件 : 事件对象为被拖拽元素

dragstart :  拖拽前触发 
drag :拖拽前、拖拽结束之间，连续触发
dragend  : 拖拽结束触发

目标元素事件 : 事件对象为目标元素

dragenter :  进入目标元素触发，相当于mouseover
dragover : 进入目标、离开目标之间，连续触发
dragleave :  离开目标元素触发，相当于mouseout
drop  :  在目标元素上释放鼠标触发

事件的执行顺序 ：drop不触发的时候

dragstart  >  drag >  dragenter >  dragover >  dragleave > dragend

事件的执行顺序 ：drop触发的时候(dragover的时候阻止默认事件)

dragstart  >  drag >  dragenter >  dragover >  drop > dragend
lyx_lyq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5学习----拖拽效果
kesilll的博客
11-18 417
终于在经过一段时间之后学到了html5，可能比较笨吧，对一些东西理解起来很困难，就像昨天晚上被html5中的拖拽效果整得快要崩溃一样，所以决定在第二天记录下学习drag事件的知识：其实现在对我们来说要做拖放效果真的很简单，因为html5专门为我们提供了API拖放效果的前提需要将要拖放的对象的draggable属性设置为true—-draggable = “true”;拖放效果的一些事件关于拖放效果的
html使用拖拽效果,HTML5拖拽效果
weixin_33279554的博客
06-03 346
拖放拖放是一个非常常见的功能。用在当你“抓取”一个对象并拖动它到另一个位置时.HTML5里, 拖放是标准的一部分：任何元素都可以拖动.浏览器支持表中的数字指定第一个完全支持拖放的浏览器版本.APIDrag and Drop4.09.03.56.012.0HTML拖放示例下面的例子是一个简单的拖放例子:function allowDrop(ev) {ev.preventDefault();}func...
html5实现拖拽效果
weixin_44411302的博客
10-11 299
今天看到了一篇关于html5拖拽文章，故拿出来一起分享。 转：https://segmentfault.com/a/1190000012811776
html5元素拖拽效果
为天空着色
09-26 935
html5元素拖拽效果的实现需要借助js，分为4个步骤，代码如下： html5元素拖拽效果 /** 存储拖放元素的ID值 */ function setsData(ev){ ev.dataTransfer.setData('text',ev.target.id); } /** 允许改元素接受拖放元素进来 */ function allowAll(ev){
HTML 五十七 HTML5 拖放
W_H_M_2018的博客
09-20 221
拖放 拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。 拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。 浏览器支持 表格中的数字指示了完全支持拖放的首个浏览器版本。 HTML 拖放实例 下列是关于拖放的简单例子： 实例 <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:198px; height:66px;pa
HTML5拖拽效果Demo
05-01
这个“HTML5拖拽效果Demo”展示了一个使用HTML5和JavaScript实现的简单拖放操作，使得用户可以方便地将元素从一个区域拖动到另一个区域。这个功能在构建交互式网页应用时非常实用，比如文件上传、图片排序或者构建可...
HTML5 拖拽效果
10-14
HTML5是现代网页开发的重要标准，它引入了许多新特性，其中拖拽效果是提升用户体验的一个显著功能。在本文中，我们将深入探讨如何利用HTML5实现拖放（Drag and Drop）功能，以及如何通过CSS3来增强视觉效果。 一、...
HTML5拖拽效果源码下载
10-24
HTML5拖拽，draggable='true',目前只有Firefox、Google、Safari支持。
HTML5 canvas炫酷拖拽圆球效果
06-05
4. **拖拽效果实现** - 当鼠标按下时，检测点击是否在某个圆球内，如果是，则记录当前圆球状态和鼠标位置。 - 鼠标移动时，根据鼠标位移更新圆球位置。 - 鼠标抬起时，停止更新圆球位置。 5. **生成新小球** - ...
html5 拖拽上传图片实例演示
09-28
HTML5 拖拽上传图片是一种用户友好的交互方式，允许用户通过拖放操作将本地图片上传至服务器。这一功能的实现主要依赖于HTML5的File API和Drag and Drop API。下面我们将详细讨论这两个API以及如何结合JavaScript...
html 拖拽效果,HTML5拖拽效果
weixin_32287563的博客
06-03 298
拖放拖放是一个非常常见的功能。用在当你“抓取”一个对象并拖动它到另一个位置时.HTML5里, 拖放是标准的一部分：任何元素都可以拖动.浏览器支持表中的数字指定第一个完全支持拖放的浏览器版本.APIDrag and Drop4.09.03.56.012.0HTML拖放示例下面的例子是一个简单的拖放例子:function allowDrop(ev) {ev.preventDefault();}func...
HTML5拖拽拖放
weixin_30687587的博客
09-29 584
效果图 注：本人是用react编写的拖拽拖放交换位置代码，所以就不贴我的代码了，下面附上了原生js编写的代码，核心代码是一样的，喜欢就推荐给更多的人叭(((*°▽°*)八(*°▽°*)))♪ 设置节点可拖拽 默认不可拖拽： <div draggable="false"></div> 改为可拖拽： <div draggable="true"></...
HTML5 拖拽
jdrunk的博客
01-19 118
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽2</title> <style type="text/css"> body{ height: 600px; border: 1px solid green; }
HTML5实现div拖拽
大家好，我是 ed.
03-03 1214
HTML5实现div拖拽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
HTML5——drag拖拽
zyz00000000的博客
09-21 1017
1. 给标签元素添加属性：draggable = “true”，该元素即可被拖拽，任何元素都可以被拖拽 特点：拖走的是灵魂 2. 事件 （1）可拖拽元素的事件 dragstart事件：被拖拽元素，开始被拖拽时触发 dragend事件：被拖拽元素，拖拽完成时触发 注意：e.target对象上，是拖拽元素的所有信息，包括属性、方法、对象等。需要了解一下： （2）目标元素事...
html5水平拖拽,HTML5拖拽（一）
weixin_30533301的博客
06-19 422
原生js也可以写拖拽，但是有两点限制：一是不能跨浏览器进行，二是代码繁杂冗余。html5就完美地避开了这两点限制，但是也不是没有缺点，兼容性就没有原生js那么好了。当然，如果不考虑ie，这简直是完美了。drag兼容性拖拽条件实现拖拽需要完成以下两点在拖拽元素上设置**属性：dragabledragbale的值有三种：true(可拖拽)、false(不可拖拽)、none(随浏览器处理)设置相关事件拖...
h5物体拖动_html5实现拖拽效果
weixin_39528289的博客
01-14 634
在此之前，实现拖拽操作都是开发人员自定义逻辑实现的，但是HTML5提供了拖拽API ，使得拖拽操作的实现变得简单。fish.gif拖拽#div1 {width: 100px;height: 100px;padding: 200px;position: absolute;top:100px;left:100px;background: url("bowl.png") no-repeat;}![](f...
Html5-实现元素拖拽(通用案例)
sxl123123123的博客
03-30 970
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div1{ border: 3px solid green; height: 200px; width: 300...
html5拖拽制作点菜单
最新发布
05-13
好的，我来介绍一下如何用 HTML5 的拖拽功能制作一个简易的点菜单。 首先，我们需要定义两个区域：菜单区和点菜区。菜单区包含所有可选菜品，点菜区则显示已经点了哪些菜品。我们可以使用 div 元素来分别表示这两个区域。 ```html <div id="menu"> <h2>菜单</h2> <ul> <li draggable="true">宫保鸡丁</li> <li draggable="true">鱼香肉丝</li> <li draggable="true">红烧肉</li> </ul> </div> <div id="orders"> <h2>点菜区</h2> <ul></ul> </div> ``` 其中，菜单区的菜品列表使用了 ul 和 li 元素来表示，每个 li 元素都设置了 draggable 属性，表示可以被拖拽。点菜区的菜品列表初始为空，也使用了 ul 和 li 元素来表示。 接下来，我们需要为菜单区的 li 元素绑定拖拽事件。当用户拖动一个菜品时，我们需要获取这个菜品的名称并添加到点菜区的菜品列表中。 ```javascript const menu = document.getElementById("menu"); const orders = document.getElementById("orders"); menu.addEventListener("dragstart", function(event) { const menuItem = event.target.textContent; event.dataTransfer.setData("text/plain", menuItem); }); orders.addEventListener("dragover", function(event) { event.preventDefault(); }); orders.addEventListener("drop", function(event) { const menuItem = event.dataTransfer.getData("text/plain"); const li = document.createElement("li"); li.textContent = menuItem; orders.querySelector("ul").appendChild(li); }); ``` 这段 JavaScript 代码分别为菜单区和点菜区绑定了 dragstart、dragover 和 drop 三个事件。当用户开始拖动一个菜品时，我们获取这个菜品的名称，并使用 event.dataTransfer.setData() 方法将数据存储在拖拽事件中。当用户拖拽到点菜区时，我们需要阻止默认的拖拽行为并在 drop 事件中获取菜品的名称并添加到点菜区的菜品列表中。 最终的效果应该是这样的： ![拖拽点菜](https://cdn.jsdelivr.net/gh/Yikun/hexo_blog/picgo/20211020104052.png) 当然，以上代码只是一个简易的示例，实际的点菜系统还需要更多的功能和细节处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值