HTML5逐步分析实现拖放功能的方法_html5教程技巧

来源:脚本之家  责任编辑:小易  

例如:1. 拖曳传档案2. 排序项目诸如此类的有问题可以私信问我详细,可以拖放上传图片等文件啊www.zgxue.com防采集请勿采集本网。

一、什么是拖放

拖放(Drag 和 drop)是 HTML5 标准的组成部分。 浏览器支持:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 被拖元素,dragElement : (1)添加事件:ondragstart (2)添加属性:dragable 放置元素,dropElement: 1、

拖放就是通过鼠标放在一个物体上,按住鼠标不放就可以把一个物体托动到另一个位置。其实我们平时一直都有接触,如图

其实就是这个样子的。 function allowDrop(ev){ev.preventDefault();//阻止默认事件。}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);//鼠标拖动图片的时候,将图片id复制到剪贴板上}function drop(ev){ev.preventDefault();

在这里插入图片描述

那么在网页上其实也可以实现同样效果的拖放功能,如图

这个主要是使用的元素的onmousemove,onmousedown,onmouseup三个事件,使用者三个事件获取相应的坐标,然后就可以实现相应的效果

在这里插入图片描述

那么,就让我们来看看如何实现的吧

你好,很高兴为你解答 试试这个jquery插件 网页最下面有例子 http://touchpunch.furf.com/ 不确定纯html+css可以做到ipad上的拖拽 希望我的回答对你有所帮助 如有其他问题,可以继续追问, 您的采纳是我前进的动力!

二、拖放事件

拖拽发生过程 被拖拽元素 dragstart 按下鼠标键并开始移动鼠标时 drag 在dragstart事件之后,在元素被拖动期间会持续触发该事件 dragend 当拖动停止时,会触发dragend事件 放置目标元素 dragenter 有元素被拖动到放置目标上 dragover 紧随dragen

在IE4的时候,Js就可以实现拖放功能了,当时只支持拖放图像和一些文本。后来随着IE版本的更新,拖放事件也在慢慢完善,HTML5就以IE的拖放功能制定了该规范,Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。

默认情况下,网页中的图像、链接和文本是可以拖动的,而其余的元素若想要被拖动,必须将 draggable 属性设置为 true,这是HTML5规定的新属性,用于设置元素是否能被拖动。因此,图像、链接、文本的 draggable 属性默认为 true,其余元素的 draggable 属性默认为 false

在实现拖放功能时有这样两个概念,分别是被拖动元素目标元素,它们都有各自支持的事件,那么我们来了解一下

(1)被拖动元素的事件

被拖动元素所支持的事件如下表所示 

事件 含义
dragstart 准备拖动被拖动元素时触发
drag 拖动的过程中触发(频繁触发)
dragend 拖动结束时触发

我们来用一个例子测试一下这三个事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100px; height: 100px; background-color: lightgreen; } </style></head><body> <div draggable='true'></div> <script> let box = document.querySelector('.box') // 绑定dragstart事件 box.addEventListener('dragstart', function() { console.log('拖拽开始了'); }) // 绑定drag事件 box.addEventListener('drag', function() { console.log('元素被拖动'); }) // 绑定dragend事件 box.addEventListener('dragend', function() { console.log('拖拽结束'); }) </script></body></html>

我们来看看测试效果

在这里插入图片描述

(2)目标元素的事件

在实现拖放功能的过程中,目标元素上的事件有如下三个

 

事件 含义
dragenter 被拖放元素进入目标元素时触发
dragover 被拖放元素在目标元素内时触发(频繁触发)
dragleave 被拖动元素离开目标元素时触发
drop 当被拖动元素被放到了目标元素中时触发

这里我要详细讲解一下这三个事件的触发规则: dragenter事件mouseover 事件类似,那怎样才算被拖放元素进入目标元素呢?经过测试发现,当被拖放元素的一半以上面积在目标元素内才算进入了目标元素 dragover事件比较特殊,当拖放元素进入目标元素以后就会一直触发,就跟你设置了一个无限循环的定时器一样,即使你不移动元素也会触发,除非拖放事件结束或者被拖放元素离开目标元素 dragleave事件 的其触发条件正好与 dragenter 事件相反,它是当被拖放元素离开目标元素时触发,经过测试,离开目标元素的条件是:被拖放元素一半以上的面积离开目标元素 drop事件 可以叫做放置目标事件,它是当被拖放元素放置到了目标元素中时触发。虽然任何元素都支持该事件,但是所有元素默认都是不允许被放置的,所以在不做任何处理的情况下,该事件是不会触发的

同样的,我们来用具体的例子,先来体会一下前三个事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100px; height: 100px; background-color: lightgreen; } .location{ width: 100px; height: 100px; background-color: lightpink; } </style></head><body> <div draggable='true'></div> <div ></div> <script> let located = document.querySelector('.location') // 绑定dragenter事件 located.addEventListener('dragenter', function() { console.log('元素进入了目标元素'); }) // 绑定dragover事件 located.addEventListener('dragover', function() { console.log('元素在目标元素内'); }) // 绑定dragleave事件 located.addEventListener('dragleave', function() { console.log('元素离开了目标元素'); }) </script></body></html>

我们来看看测试效果,这里你们要仔细看被拖放元素多少面积进入或离开目标元素时才触发的对应事件

在这里插入图片描述

那么最后我们再来将一下如何才能触发 drop事件,只需要阻止 dragenter事件dragover事件 的默认行为即可。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100px; height: 100px; background-color: lightgreen; } .location{ width: 100px; height: 100px; background-color: lightpink; } </style></head><body> <div draggable='true'></div> <div ></div> <script> let located = document.querySelector('.location') located.addEventListener('dragenter', function(e) { e.preventDefault() }) located.addEventListener('dragover', function(e) { e.preventDefault() }) located.addEventListener('drop', function() { console.log('元素被放置'); }) </script></body></html>

来看下测试效果图

在这里插入图片描述

值得注意的是,在我们没有对 drop事件 做处理之前,将被拖放元素拖动到目标元素中时,鼠标样式会变成禁止的样式,如图

在这里插入图片描述

而当我们设置元素为可放置了以后,鼠标样式是这样的。如图

在这里插入图片描述

三、dataTransfer对象

上面只是简简单单地实现了拖放功能,但并没用利用该功能做出什么实际性的功能,这里我们介绍一个拖放事件中事件对象上的一个特别重要的属性——dataTransfer

我们通过 event.dataTransfer 来获取该对象,其主要的作用就是从被拖放元素向目标元素传递一个字符串数据

(1)方法

dataTransfer上有两个方法,如下表所示

 

方法 含义
setData 设置字符串,并设置数据类型
getData 获取对应数据类型的字符串

setData() 方法接收两个参数,第一个参数表示的是字符串的数据类型,HTML5规定了两种数据类型,分别是 text/plaintext/uri-list,前者表示普通字符串,后者表示URL字符串;第二个参数 就是用于存放的字符串

getData() 方法只接收一个参数,即需要接收的字符串类型

我们来简单使用一下这两个方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100px; height: 100px; background-color: lightgreen; } .location{ width: 100px; height: 100px; background-color: lightpink; } </style></head><body> <div draggable='true'></div> <div ></div> <script>let box = document.querySelector('.box')// 为被拖放元素绑定 dragstart 事件 box.addEventListener('dragstart', function(e) { // 设置类型为 text/plain 的 字符串 e.dataTransfer.setData('text/plain', '我是拖放开始时被设置的字符串') }) let located = document.querySelector('.location') located.addEventListener('dragenter', function(e) { e.preventDefault() }) located.addEventListener('dragover', function(e) { e.preventDefault() }) located.addEventListener('drop', function(e) { // 将被拖放元素放置到目标元素时获取字符串 let res = e.dataTransfer.getData('text/plain') console.log(res); }) </script></body></html>

来看下测试结果

在这里插入图片描述

(2)属性

dataTransfer对象 上还有两个比较常用的属性,如下表所示

 

属性 含义
dropEffect 被拖放元素的放置行为
effectAllowed 目标元素支持的放置行为

首先说一下,这个两个属性需要搭配使用,它们决定了被拖放元素目标元素 之间的关系的,当设定好两者的关系后,在进行拖动操作的时候,鼠标会根据不同的关系显示不同的样式,除此之外,没有别的特别的作用。

dropEffect 可以设置以下几个属性

 

含义
none 默认值。不能把拖动的元素放在这里
move 应该把拖动的元素移动到该目标元素
copy 应该把拖动元素复制到该目标元素
link 表示目标元素会打开被拖放进来的元素对应的链接

【注意】:dropEffect 属性必须在 dragenter事件 中设置,否则无效

effectAllowed 可以设置以下几个属性

含义
uninitialized 被拖放元素没有设置放置性为
none 被拖放元素不能有放置性为
copy 只允许值为 ‘copy’ 的 dropEffect 目标元素
link 只允许值为 ‘link’ 的 dropEffect 目标元素
move 只允许值为 ‘move’ 的 dropEffect 目标元素
copyLink 只允许值为 ‘copy’ 和 ‘link’ 的 dropEffect 目标元素
copymove 只允许值为 ‘copy’ 和 ‘move’ 的 dropEffect 目标元素
linkMove 只允许值为 ‘link’ 和 ‘move’ 的 dropEffect 目标元素
all 只允许任意值的 dropEffect 目标元素

【注意】:effectAllowed 属性必须在 dragstart事件 中设置,否则无效

上面也说了,这两个属性基本上只是用来改变鼠标样式的,所以如果想实现特定的功能还得我们自己来重写事件的处理函数。

下面来看一个拖放实例:

需求: 将一段文本拖放到一个元素中

因为文本是默认支持的拖放元素,所以我们可以不对其做任何的事件绑定。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .location{ width: 100px; height: 100px; border: 1px solid black; } </style></head><body> <div class="box">我是一段测试文字</div> <div class="location"></div> <script> let located = document.querySelector('.location') located.addEventListener('dragenter', function(e) { e.dataTransfer.dropEffect = 'copy' e.preventDefault() }) located.addEventListener('dragover', function(e) { e.preventDefault() }) located.addEventListener('drop', function(e) { e.target.innerHTML = e.dataTransfer.getData('text/plain') }) </script></body></html>

测试动图

在这里插入图片描述

四、结束语

到此这篇关于HTML5逐步分析实现拖放功能的方法的文章就介绍到这了,更多相关HTML5拖放功能内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

把文件从桌面拖拽2113到浏览器是Web应用程序集成5261的最终目标之一。本教程共四篇4102文章1653(本文是第一篇),主要介绍了:1.实现将文件拖放到页面元素上2.在JavaScript中分析被拖放的文件3.在客户端上加载和解析文件4.使用XMLHttpRequest2将文件异步上传到服务器5.上传时,显示图形进度条6.使用进程增强( progressive enhancement)以确保文件上传表单在所有浏览器正常工作7.纯JavaScript代码,不使用其它库。咻,开始吧!糟糕的浏览器支持在开始之前说明一下,这个教程使用了一些HTML5的最新技术,可能以后会被修正。目前代码可以正常工作,但是很可能随着API的变化或者浏览器升级而受到影响。§Firefox和Chrome的最新版本支持所有的功能并且可以完美运行。§Opera可以用JavaScript解析文件,但未实现拖放文件和XMLHttpRequest2上传。§IE浏览器和桌面版本的Safari不支持所有的API。§苹果已禁用Safari浏览器的iPhone和iPad版本的HTML文件上传表单。有谁知道为什么吗?最后,请注意我的代码只是演示了基本概念,几乎没有错误检查,因此需要进行修改以适应你的工作需要。HTML和CSS这是我们的带有文件输入类型的标准表单。唯一的HTML5特性是“multiple”属性,它允许用户选择任意数量的文件。我们将上传文件到运行PHP的服务器上,但是无论你在服务器端使用什么技术,代码是大致相同的。隐藏的MAX_FILE_SIZE值指定为300,000个字节,这是PHP使用的,但我们还会在浏览器端用它进行检查,以防止大文件上传。#filedrag元素将被用作接收拖放文件的位置。元素是通过CSS隐藏的,但如果浏览器支持拖拽的话,它会在JavaScript中被显示:我们还定义了一个.hover类,当用户拖动文件到相应区域元素时,改变元素的显示风格。浏览器不支持在那种情况下的:hover风格,但当事件触发时,我们可以用JavaScript添加类。文件操作APIW3C 文件操作API提供了一些对象,我们使用了:§FileList:代表选定的文件数组。§File:代表一个单独的文件。§FileReader:支持JavaScript的客户端读取文件数据的接口。Javascript事件是时候处理JavaScript代码了。我们不使用任何JavaScript库,为了节省时间,我们将创建一个辅助函数返回元素的ID和输出状态消息:我们将在Init()函数里检查文件操作API是否有效:Init()函数说明:1.给文件输入元素设置一个“change”事件监听器。2.显示#filedrag元素。3.设置“dragover”和“dragleave”事件监听器,以改变的#filedrag元素的风格。4.给#filedrag元素设置一个“drop”的事件监听器。5.隐藏表单的提交按钮 - 它不是必需的,因为当文件被选中时我们将进行分析和上传,而不是提交表单。或者,当浏览器支持文件拖动时,你可以隐藏文件输入元素。就个人而言,我更愿意同时提供两种选择,因为拖放实际上会带来实用性的问题。XMLHttpRequest.upload方法检查防止在Opera中的问题。浏览器支持File,FileList和FileReader,但不支持拖放事件或XMLHttpRequest2。因此,它可以显示文件信息,但我们不希望显示#filedrag的元素或删除submit按钮。改变文件拖放风格很少人在浏览器中进行过文件拖放。事实上,经验丰富的网络用户也不太考虑是否可行。因此,我们使用了标有“drop files here”的元素。当文件拖到#filedrag上时,我们还通过改变元素的风格来进行显示。分析放下或被选中的文件无论是使用“Browse”按钮来选中一个或多个文件,或者将文件拖放到拖#filedrag的位置上,我们使用的的相同FileSelectHandler()函数来进行处理:函数说明:1.调用FileDragHover()删除hover风格和取消浏览器的事件。这是必不可少的,否则浏览器可能会尝试显示该文件。2.获取一个FileList对象,无论是从文件输入框(e.target.files)或#filedrag元素(例如dataTransfer.files)。3.最后,函数遍历FileList的所有File对象,并把它作为一个参数传递给ParseFile()函数...该函数输出的信息是File对象提供的三个主要的只读属性:§.name: 文件名 (不包含文件路径)。§.type: MIME类型, 例如 image/jpeg,text/plain等等。§.size: 文件大小(字节)内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html5 拖放(drag 和 drop)详解与实例代码
  • html5中的拖放实现详解
  • html5拖放api实现拖放排序的实例代码
  • html5拖放效果的实现代码
  • html5 拖放功能实现代码
  • 如何使用HTML5实现文件拖放
  • HTML5中拖放功能有什么实际意义?比如说
  • html5 拖动出来的残影效果怎么设置
  • 如何使用HTML5进行文件拖放
  • 如何使用HTML5+CSS3+jquery 实现用户拖拽自定义界面
  • html5拖动效果范例解释
  • Html5实现如何在两个div元素之间拖放图像
  • 移动端如何实现拖放?就是一个元素拖到另一个元素...
  • html5拖动元素会触发哪些事件
  • html5怎么实现元素随意拖到,是改变位置,不是把元...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5拖放html5 拖放(drag 和 drop)详解与实例代码html5中的拖放实现详解html5拖放api实现拖放排序的实例代码html5拖放效果的实现代码html5 拖放功能实现代码 html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解html5逐步分析实现拖放功能的方法移动端html5 input常见问题(小结)html5超文本标记语言的实现方法html5 webrtc简单实现视频调用的示例代码html5之webcoekt播放jpeg图片流如何在canvas上的图形/图像绑定事件监听的实现canvas 绘图时位置偏离的问题解决关于canvas.todataurl 在ios运行失败的问题解决 canvas绘制图片drawimage使用方法html5中外部浏览器唤起微信分享功能的代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved