HTML5 拖放Drag&Drop+完整示例

最新推荐文章于 2021-06-09 10:38:00 发布
最新推荐文章于 2021-06-09 10:38:00 发布
阅读量120 收藏 1
点赞数
分类专栏： HTML 文章标签： html5 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cokeoscar/article/details/115697272
版权

使用到的API介绍

目标元素中：
οndrοp=“drop(event)” ——目标元素完全接受被拖放元素时触发
οndragοver=“allowDrop(event)”——被拖放元素在目标元素中移动时触发
拖放元素中：
οndragstart=“drag(event)”——被拖放元素在开始拖放时触发

拖动图片放入框中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dragpic</title>
    <style type="text/css">
        #div1{
    
            width:80px;
            height: 80px;
            padding: 80px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <script>        
        function allowDrop(ev){
           
            //避免浏览器对数据默认处理，drop事件的默认行为是以链接打开     
            ev.preventDefault(
最低0.47元/天 解锁文章
cokeoscar
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 drag的使用案例 --- 类似于图片墙
KuckBoy的专栏
08-20 974
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>drag案例的演示</title> <script> function allowDrop(ev){ //不执行默认处理（拒绝被拖放） ev.preventDefault()
HTML5 拖放（Drag 和 Drop）详解与实例
weixin_34072637的博客
02-04 355
简介 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 先点击一个小例子：在用户开始拖动 &lt;p&gt; 元素时执行 JavaScript &lt;p draggable="true" ondragstart="myFunction(event)"&gt;拖动我!&lt;/p&gt; 提示： 链接和图片默认是可...
HTML5 drag和drop的亲手实践
u011927449的博客
05-16 246
起因 最近在公司打杂的时候，突然分到了一个锅，就是要支持一个新的功能：用户可以通过拖曳组件来改变组件的顺序。因此，这阵子就看了一下网上的一些drag和drog的文章以及W3C的介绍，然后自己亲手实践了一下，毕竟打码，才能变得更强。 首先，先放一个我的demo，大家可以去那里随便拖动一下玩一玩:https://chenjigeng.github.io/example/drag.html 知识储备 与drag和drog有关的属性和事件 draggable属性: 如果你想让一个元素变得可以拖曳的话，那么你就必须设
html拖拽事件 上传,html5使用Drag事件编辑器拖拽上传图片的示例代码
weixin_34357232的博客
06-09 134
本站的编辑器图片上传便是使用的这部分seajs 定义tools模块/*** created by zhaojunlike on 8/22/2017.*/define(function (require, exports, module) {/*** 截图粘贴* @param selector* @param callback*/exports.paste = function (selector,...
html5 drag移动位置,HTML5+CSS3实现拖放(Drag and Drop)示例
weixin_42298424的博客
06-04 227
本文简单介绍一下HTML5的拖放实现。拖放(Drag 和 drop)是 HTML5 标准的组成部分。浏览器支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。被拖元素，dragElement :(1)添加事件：ondragstart(2)添加属性：dragable放置元素，dropElement:1、添加事件：ondarg...
HTML5+CSS3实现拖放(Drag and Drop)示例
09-28
其中之一就是拖放（Drag and Drop）功能，使得用户可以通过简单的鼠标操作在网页上移动元素，极大地提升了交互性。本示例将详细介绍如何使用HTML5和CSS3实现拖放功能。 拖放功能在HTML5中被标准化，其核心在于`...
HTML5 拖放（Drag 和 Drop）详解与实例代码
09-27
HTML5的拖放功能（Drag and Drop）是现代网页开发中的一个重要特性，它允许用户将元素从一个位置拖动到另一个位置，增强了交互性和用户体验。本文将深入探讨HTML5拖放的基本概念、如何使用以及浏览器的兼容性。 一...
windows drag/drop拖放操作示例代码
11-14
windows平台上实现IDropSource、IDropTarget和IDataObject接口，实现拖放功能。拖放功能包含源和目标两块，可以单独实现，也可以同时实现拖和放两个功能。
Drag-and-Drop:拖放，克隆，调整大小，删除和旋转
05-13
快速开始首先，请克隆该项目并在终端中运行以下命令： $ git clone https://github.com/Big-Silver/Drag-and-Drop.git drag_drop$ cd drag_drop $ Run index.html in browser.In drag_drop.js$(document).ready...
HTML5高阶实例之Drag&Drop
万少博-FE
03-17 428
更新日期：2018年3月27日21:53:27 1、原生拖放-概述 对于拖放事件而言，默认情况下，浏览器不会在拖动期间改变被拖动元素的外观，但你可以自己修改。不过，大多数浏览器会为正被拖动的元素创建一个半透明的副本，这个副本始终随着光标移动。如下图所示。 &amp;amp;amp;amp;gt; 默认情况下，图片、链接和文本是可以拖动的，也就是说img标签、a标签和选中的文字可以被拖动。 ...
js原生拖放
越努力，越幸运！
03-09 2058
HTML5拖放学习总结
#学习笔记#(10)元素拖放事件-html
Pluto
12-09 348
四个函数 1 让元素变成可拖动的数据 2 当元素到达可拖放的区域，阻止原来的设定（链接打开新网页） 3 当在可拖放区域(div)内，释放鼠标键，div获取元素数据，进行放置 4 当完成放置给出提示 Html5图片拖放 div { float:left; width:250px; height:200px; margin:10px; padding:10px; bo
搞懂html5新增的拖放API（分析火狐和其它浏览器的不同）
guozengjie的专栏
04-16 1990
1.为什么ondrop事件不被调用 当我们直接写document.ondrop=function(e){alert("test")};这个test是不会被弹出的，因为html元素默认是阻止放的操作的，自然这个事件也不会被激发，所以想让这个事件被调用，必须加上这个，document.ondragover=function(e){  return false;  }  ondrop这个事件才
HTML5 之拖放(drag与drop)
weixin_33694620的博客
05-31 96
拖放（Drag 和 drop）是 HTML5 标准的组成部分。 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 HTML5 拖放实例 下面的例子是一个简单的拖放实例： 实例1 <!DOCTYPE HTML> <html> <head> <style type="...
html5拖(drag)放(drop)功能
heyanfeng22的专栏
08-06 972
拖放功能分为两步 function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.ge
HTML5-拖拽
weixin_30906671的博客
08-08 95
HTML5-拖拽 将div中元素拖到另一个中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style...
HTML5——新特性，拖放
weixin_30834783的博客
07-25 157
HTML5 拖放（Drag 和 Drop） 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放1.设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true ：<img draggable="true">2.拖动什么 - ondragstart 和 setData()然后，规定当元素被拖动时...
HTML5拖拽实现的小例子
当你迷路时，放慢一下脚步
11-30 1305
html> html> head lang="en"> meta charset="UTF-8"> title>来回拖放title> style> #div1{ width: 400px; height: 200px; border: 1px solid black;
HTML 5 拖放(Drag 和drop)
Langzi_2014的专栏
03-17 97
浏览器支持 Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5。 1、把标签 draggable 属性设置为 true。 2、向标签添加ondragstart 属性调用了一个函数drag(event)。 function drag(ev){ ev.dataTransfer.setData("Tex...
html拖拽垃圾桶,html5拖放-垃圾桶效果
最新发布
06-03
好的，这个问题涉及到HTML5的拖放功能。您可以通过HTML5的drag和drop事件实现这个垃圾桶效果。 具体实现步骤如下： 1. 创建一个垃圾桶图标的元素，例如一个div元素。 2. 给垃圾桶元素添加一个drop事件监听器，用于接收被拖拽元素的放置操作。 3. 给需要被拖拽的元素添加一个dragstart事件监听器，用于标记被拖拽的元素。 4. 给需要被放置的容器元素添加一个dragover事件监听器，用于防止浏览器默认的放置行为。 5. 给需要被放置的容器元素添加一个drop事件监听器，用于处理被拖拽元素的放置操作。 6. 在dragstart事件中设置被拖拽元素的数据，例如设置一个dataTransfer对象的数据类型和数据值。 7. 在drop事件中获取被拖拽元素的数据，并根据数据值进行相应的操作，例如删除被拖拽元素。 下面是一个示例代码，供您参考： ``` <!DOCTYPE html> <html> <head> <title>HTML5拖放-垃圾桶效果</title> <style> #trash { width: 200px; height: 200px; border: 2px solid black; background-color: gray; text-align: center; line-height: 200px; font-size: 30px; color: white; margin: 50px auto; } #drag { width: 100px; height: 100px; border: 2px solid black; background-color: red; text-align: center; line-height: 100px; font-size: 20px; color: white; position: absolute; top: 50px; left: 50px; cursor: move; } </style> </head> <body> <div id="trash">垃圾桶</div> <div id="drag" draggable="true">拖我到垃圾桶</div> <script> var drag = document.getElementById("drag"); var trash = document.getElementById("trash"); drag.addEventListener("dragstart", function(event) { event.dataTransfer.setData("text/plain", "drag"); }); trash.addEventListener("dragover", function(event) { event.preventDefault(); }); trash.addEventListener("drop", function(event) { var data = event.dataTransfer.getData("text/plain"); if (data === "drag") { drag.parentNode.removeChild(drag); } }); </script> </body> </html> ``` 以上代码实现了一个拖拽一个红色的方块，将其拖拽到一个灰色的div中，会删除该方块。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值