html5 拖拽

最新推荐文章于 2019-11-06 17:36:50 发布
最新推荐文章于 2019-11-06 17:36:50 发布
阅读量411 收藏 2
点赞数
分类专栏： HTML5

若实现拖拽（火狐以外），被拖拽元素需添加属性：draggable

draggable是一个枚举属性，用于指定一个标签是否可以被拖拽。有以下四种取值：

true表示此元素可拖拽
false表示此元素不可拖拽
auto除img和带href的标签a标签表示可拖拽外，其它标签均表示不可拖拽
其它任何值表示不可拖拽

例一：(除火狐以外的现代浏览器中均可以拖拽)

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title></title>  
  6.     <style>  
  7.         * {padding:0;margin:0}  
  8.         #oDiv1 { width:100px;height:100px;background-color:#c50000}  
  9.         #oDiv2 { width:200px;height:100px;background-color:#ffd800;position:absolute;top:300px;left:300px;}  
  10.     </style>  
  11. </head>  
  12. <body>  
  13.     <div id="oDiv1" draggable="true"></div>  
  14. </body>  
  15. </html>  

若想火狐下也同样实现拖拽，需要设置dataTransfer对象的setData()方法：

例二：(现代浏览器中均可以拖拽)

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title></title>  
  6.     <style>  
  7.         * {padding:0;margin:0}  
  8.         #oDiv1 { width:100px;height:100px;background-color:#c50000}  
  9.         #oDiv2 { width:200px;height:100px;background-color:#ffd800;position:absolute;top:300px;left:300px;}  
  10.     </style>  
  11. </head>  
  12. <body>  
  13.     <div id="oDiv1" draggable="true"></div>  
  14.     <div id="oDiv2"></div>  
  15.     <script>  
  16.         var oDiv1 = document.getElementById("oDiv1");  
  17.         var oDiv2 = document.getElementById("oDiv2");  
  18.         oDiv1.ondragstart = function (e) {  
  19.             var e = e || window.event;  
  20.             e.dataTransfer.setData(" ", " ");   //这里的两个参数均包含一个空格，后面会介绍dataTransfer  
  21.         }  
  22.     </script>  
  23. </body>  
  24. </html>  

事件：

【被拖拽元素】

ondragstart拖拽前触发（鼠标按下并开始拖拽）
ondrag           拖拽过程中触发（连续出发，即使鼠标不移动也会连续触发）
ondragend     拖拽结束触发

【目标元素】

ondragenter  进入目标元素
ondragover   
ondrop释放鼠标瞬间触发
ondragleave  鼠标离开目标元素触发

整个拖拽过程事件顺序：

ondragstart   — ondrag — ondragenter — ondragover — ondragleave/ondrop — ondragend  

注：1.  若想触发ondrop事件，ondragover 中需要阻止默认事件（元素默认是不允许放置的）。

      2.  在Firefox 3.5+中，如果是把图像拖放到放置目标上，页面就会转向图像文件；而如果是把文本拖放到放置目标上，则会导致无效URL错误，因此，为了让Firefox支持正常的拖放，还要取消drop事件的默认行为，阻止它打开URL。

关于event.dataTransfer

setData(key,value)两个参数都是字符串类型
getData(key)getData()可以取得由setData()保存的值
effectAllowed设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)  ；事件 ondragstart中设置
setDragImage(element, x, y)指定一副图像，当拖动发生时，显示在光标下方。这个方法接受的三个参数分别是要显示的HTML元素和光标在图像中的x、y坐标。其中，HTML元素（可以是隐藏的元素）可以是一副图像，也可以是其它元素。是图像则显示图像，是其它元素则显示渲染后的元素。实现这个方法的浏览器有Firefox 3.5+、Safari 4+ 和 Chorme
files  获取外部拖拽文件的一个类似数组的集合（length）。集合中每个元素有type属性，依次判断拖拽的文件类型。实现这个属性的浏览器有IE10+、Firefox 3.5+和Chrome。
注：只能在拖放事件的事件处理程序中访问dataTransfer对象。

       保存在dataTransfer对象中的数据只能在【目标元素】事件处理程序中读取。

关于FileReader（读取文件信息）

readAsDataURL        
参数为要读取的文件对象，将文件读取为DataUrl
onLoad                          
 读取成功完成时触发此事件，this.result 获取读取的文件数据，如果是图片，将返回base64格式的图片数据

例：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. var fd=new FileReader();  
  2. fd.readAsDataURL(fs[0]);  //fs为event.dataTransfer.files获得的集合  
  3. fd.onLoad=function(){  
  4.    alert(this.result)  
  5. }  

一个完整的实例（拖拽上传预览）：

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML>    
  2. <html>    
  3. <head>    
  4. <style>    
  5.     *       { padding:0px;margin:0px;}    
  6.     #oDiv1  {width:300px;height:300px;border:1px solid #000;}    
  7. </style>    
  8. </head>    
  9. <body>    
  10.     <div id="oDiv1"></div>    
  11.     <script>  
  12.         var oDiv1 = document.getElementById("oDiv1");  
  13.         var oDiv2 = document.getElementById("oDiv2");  
  14.   
  15.         oDiv1.ondragenter = function (ev) {  
  16.             this.style.borderStyle = "dashed";  
  17.         }  
  18.         oDiv1.ondrop = function (ev) {  
  19.             var files = ev.dataTransfer.files;  
  20.             for (var i = 0, f; f = files[i]; i++) {  
  21.                 var reader = new FileReader();  
  22.                 reader.onload = (function (f) {  
  23.                     return function () {  
  24.                         oDiv1.innerHTML = '<img src="' + this.result + '" title="' + f.name + '" width="100%"  />';  
  25.                     }  
  26.                 })(f)  
  27.                 //(function(f){reader.onload = function (ev) {    
  28.                 //    oDiv1.innerHTML = '<img src="' + ev.target.result + '" title="' + f.name + '" width="100%" height="100%" />';    
  29.                 //}})(f)    
  30.                 reader.readAsDataURL(f);  
  31.             }  
  32.             this.style.borderStyle = "solid";  
  33.             ev.stopPropagation();  
  34.             ev.preventDefault();  
  35.         }  
  36.         oDiv1.ondragover = function (ev) {  
  37.             ev.stopPropagation();  
  38.             ev.preventDefault();  
  39.         }  
  40.         oDiv1.ondragleave = function (ev) {  
  41.             this.style.borderStyle = "solid";  
  42.         }  
  43.     </script>    
  44. </body>    
  45. </html>    


参考：http://www.w3cmm.com/html/drag.html

原文地址：http://blog.csdn.net/hdchangchang/article/details/17753623

ywb201314
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5拖拽
weixin_46191548的博客
02-06 161
拖拽属性是H5新特性：是指是指鼠标点击事件源后不松手，将其拖拽到目标对象或半途松手（释 放）的过程 源对象：指的鼠标点击的一个事件，例如，一个图片，一个元素 目标对象：是指我们拖动源对象后，预计要进入的区域 被拖动的对象可以触发的方法： ondragstart:事件源可以被拖动 ondrag:被拖动过程中 ondragend:源对象被拖动结束 源对象进入目标对象可以触发的事件： ondragent...
html5 -- 拖放
qq_44867271的博客
06-08 88
首先，先了解一下拖放事件，运行以下代码，并结合控制台，你可以理解拖、放事件。 <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 { width: 530px; height: 300px; padding: 10px; border: 1px solid #aaaaaa;
html5 拖放---（二）转
weixin_34066347的博客
03-21 57
draggable是一个枚举属性，用于指定一个标签是否可以被拖拽。有以下四种取值： true 表示此元素可拖拽 false 表示此元素不可拖拽 auto 除img和带href的标签a标签表示可拖拽外，其它标签均表示不可拖拽 其它任何值 表示不可拖拽 事件： 【被拖拽元素】   ondragstart 拖拽前触发（...
html5拖拽，要在ondragover阻止这个默认事件,和解决火狐上的兼容问题
qq_39634880的博客
05-19 4365
在火狐上不兼容这一套： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { margin: 0;
HTML5 draggable拖放属性与火狐兼容性问题
右边疯子_的博客
11-06 1079
使用draggable属性拖动一个图片时,火狐上总会新开一个窗口，其他浏览器不会出现这种情况，怎样可以避免？ 在VUE的 created 状态中添加 created() { document.body.ondrop = function (event) { event.preventDefault(); event.stopPropa...
可以拖动的层（兼容firefox）
weixin_30699465的博客
11-05 54
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> <he...
关于html5拖拽中的一些坑
百岁如流富贵冷灰的博客
05-30 6050
难受，上头交代做的页面里有个拖拽的功能，网上其实有许多好用的拖拽插件，但是本着不拿嗟来之食，毅然决然的选择使用原生的js拖拽API，然后被坑惨了。。。。 1.首先是从body下拖拽到iframe中的     ☆需要注意，当使用a标签的target属性进行iframe切换时，iframe标签的src属性是不会变化的 &lt;a href="1.html" target="iframe"&gt...
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拖拽功能实现的拼图游戏
12-13
具体代码如下所示：   <!--代码如下，最下面给出了我测试用的9张250*250的图片切片-->...drag拖拽</title> <style> .box{ float: left; } img{ width: 150px; height:150px; } #puzzle{
HTML5拖拽效果Demo
05-01
这个“HTML5拖拽效果Demo”展示了一个使用HTML5和JavaScript实现的简单拖放操作，使得用户可以方便地将元素从一个区域拖动到另一个区域。这个功能在构建交互式网页应用时非常实用，比如文件上传、图片排序或者构建可...
HTML5拖拽的简单实例
09-28
HTML5的拖放功能是一种强大的交互特性，允许用户通过简单的鼠标操作将元素从一处移动到另一处。在本文中，我们将深入探讨HTML5拖放的简单实例，了解如何使用相关属性、事件和方法来实现这一功能。 首先，`draggable...
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
Numper基础（一）
07-27
Numper基础（一）
C语言写的潮流计算大作业代码.zip
最新发布
07-27
c写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zip
关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型.docx
07-27
大模型（Large Models），尤其是指预训练的大规模语言模型，在自然语言处理（NLP）、计算机视觉（CV）等领域取得了显著的进步。以下是一些关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型： 1. 大模型教程资源 官方文档： 大多数大型模型都会在其官方网站或GitHub页面上发布详细的文档，包括模型介绍、安装指南、使用示例等。 例如，Hugging Face的Transformers库提供了丰富的文档和教程。 在线课程： Coursera、edX等在线教育平台上提供了关于大模型的课程。 例如，斯坦福大学的NLP课程通常会涵盖最新的大模型技术。 博客文章： Medium、Towards Data Science等平台上有很多关于大模型的文章，这些文章通常由专业人士撰写，包含实战经验和技巧。 视频教程： B站（bilibili.com）和YouTube上有很多关于大模型的教程视频，适合初学者入门。 2. 调用API和使用技巧 Hugging Face Transformers： 提供了多种预训练模型的加载和调用方式。 Hugging Face文档 是一个非常
pi_heif-0.17.0-cp39-cp39-macosx_14_0_arm64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
07-27
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
[毕设]酒店管理系统PPT与源码展示.zip
07-27
[毕设]酒店管理系统PPT与源码展示
html5拖拽制作点菜单
05-12
HTML5拖拽功能可以通过JavaScript来实现。下面是一个简单的示例，可以用来制作一个简单的点菜单： HTML代码： ```html <div id="menu"> <div class="item" draggable="true" ondragstart="drag(event)">Item 1</div> <div class="item" draggable="true" ondragstart="drag(event)">Item 2</div> <div class="item" draggable="true" ondragstart="drag(event)">Item 3</div> </div> <div id="cart" ondrop="drop(event)" ondragover="allowDrop(event)"> <h2>Cart</h2> </div> ``` JavaScript代码： ```javascript function allowDrop(event) { event.preventDefault(); } function drag(event) { event.dataTransfer.setData("text", event.target.id); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); var item = document.getElementById(data); var cart = document.getElementById("cart"); cart.appendChild(item); } ``` 在上面的示例中，我们创建了两个div元素，一个用于菜单，一个用于购物车。我们还为菜单项添加了一个属性“draggable”，并为其添加了一个事件处理程序“ondragstart”，该事件处理程序将数据存储在数据传输对象中。 在购物车div上，我们还添加了两个事件处理程序：“ondrop”和“ondragover”，它们分别用于处理拖放事件和允许元素拖放到该元素上。 最后，我们还定义了三个函数：allowDrop（允许放置），drag（拖动）和drop（放置）。这些函数分别处理拖动操作和放置操作。 当用户将一个菜单项拖动到购物车div上时，drop函数将被调用。该函数通过数据传输对象获取拖动的元素，并将其添加到购物车div中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值