html5拖拽换位效果演示,HTML5拖拽(二)--dataTransfer
从HTML5拖拽(一)我们得知:利用html5的dragable属性以及一些拖拽事件可以进行拖拽,但是无法获得所拖拽的数据。dataTransfer就应运而生,顾名思义,这是个传递数据的属性。
基础语法
dataTransfer的常用方法:
setData(format,data):设置拖拽元素的信息
format:系统默认格式为: text/plain、text/html、text/xml、text/url-list(也可以自定义format,把format-data当key-value键值对使用)
data:保存在拖拽元素中的数据
getData(format):获取拖拽元素的信息
format:和setData里的format遥相呼应,才能取到相应的值
clearData():清除拖拽信息
dataTransfer的常用属性:
effectAllowed:设置拖拽时应带有的样式类型
dropEffect:设置拖拽元素被放下时的样式
files:内含一系列文件信息,常用于将文件从桌面拖向浏览器
使用场景
情境1:从浏览器外把文件拖到投放区,并显示文件信息
html
文件名 | 文件大小 | 文件类型 |
js
var msg = document.getElementById('msg');
var section = document.getElementById('section');
section.ondragover = function (event){
var e = event||window.event;
e.preventDefault();
//拖拽元素进入投放区时,鼠标样式变为move
e.dataTransfer.dropEffect = 'move';
};
section.ondrop = function(event){
var e = event||window.event;
e.preventDefault();
//拖拽元素进入投放区并投放时,显示文件样式
for(var i=0;i
var file = e.dataTransfer.files[i];
//如果想知道file属性里边有什么有用的字段,可以console.log(e.dataTransfer.files[i])
var html = "
"+file.name+""+file.size+""+file.type+"";
msg.innerHTML += html;
}
section.style.border = '1px solid #562356 ';
};
这样就完美的解决了文件拖拽的难题了,而且支持多文件拖拽。
情境2:拖动文字到投放区
html
js
var section = document.getElementById('section');
var target = document.getElementById('target');
var index = 0;//拖拽次数
target.ondragstart = function (event){
var e = event||window.event;
index++;
e.dataTransfer.effectAllowed = 'move'; //此时样式已换成了move样式
e.dataTransfer.setData("num",index) ;//把拖拽的次数放进setData里边
};
section.ondragover = function (event){
var e = event||window.event;
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
};
section.ondrop = function(event){
var e = event||window.event;
//获取系统自带的拖拽信息,如果不需要把样式也放进去, 可以把 text/html换成text/plain
var t = e.dataTransfer.getData('text/html');
var n = e.dataTransfer.getData('num');
section.innerHTML = t+"
"+"拖拽的次数为:"+n;
e.dataTransfer.clearData();//清除拖拽信息
};
html5拖拽换位效果演示,HTML5拖拽(二)--dataTransfer相关推荐
- html5拖拽换位效果演示,H5 实现div拖放位置互换
1 给要进行拖拽的div加上draggable="true" οndrοp="drop(event,this)" οndragstart="drag( ...
- 用html5做淡出淡入效果,在Html5 canvas中淡入淡出
我已经有了一个图像的画布,我想淡入淡出图像不断.我已经使用上面的代码:在Html5 canvas中淡入淡出 var canvas; var context; var ga = 0.0; var tim ...
- 未来技术 html5 app,未来web浏览技术提前体验:10个会让你惊叹不已的HTML5画布(canvas)技术应用演示...
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...
- html5 2020视觉效果,体验未来:10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演示-UI博客精选...
随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我们今后的 ...
- 用html5写一段文字画布中,10个让人惊叹的HTML5画布(canvas)技术效果
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...
- html5制作波浪,技能get:用HTML5实现波浪效果
rr Document .box{ width: 500px; height: 500px; margin:100px auto; background:hotpink; border-radius: ...
- HTML5电子书翻页效果 代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文
介绍 源码名称:[HTML5电子书翻页效果]代码特效+鼠标点击拖拽滑动翻页+点击书页内容放大+不支持中文 源码大小:237KB 开发语言:PHP+Mysql 操作系统:Windows,Linux 源码 ...
- html 树形图可拖拽,HTML5拖拽API实现vue树形拖拽组件
因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽.近期有时间将核心部分代码抽出,简单说下实现方式. 1.树形结构-组件递归使用 树形结构非常简单,t ...
- html5拖拽表单设计器,require+jquery+backbone实现拖拽式报表设计器-拖拽式表单设计器...
HTML我帮您-拖拽式报表设计器-拖拽式表单设计器是一个可视化设计器,基于require+jquery+backbone+underscore+bootstrap实现的表单设计器.思想来源于 Layo ...
最新文章
- Open***2.4.3 基于用户名密码验证方式(实战)
- 65 Airflow组成部分的概念介绍
- Flink从入门到精通100篇(二十三)-Flink实战应用案例:如何清理过期的 Checkpoint 目录?
- linux监听端口丢失,linux – 如果没有监听端口,则为Systemd重启服务
- Druid学习之路 (四)Druid的数据采集格式
- shell 管道命令 、、||、>、>>(精)
- 《深入浅出DPDK》读书笔记(五):同步互斥机制
- WdatePicker日历控件使用方法
- WordPress数据库研究
- matlab repmat 函数的使用
- 迅捷cad_迅捷元组
- 将SpringBoot项目打包并部署到服务器
- 飞鸽传书linux运行,Linux下飞鸽传书实现
- 【GamePlay】Unity手机屏幕UI适配问题
- 苹果Swift编程语言入门教程【中文版】
- LPTSTR、LPCSTR、LPCTSTR、LPSTR之间的转换
- TypeError:object of type 'type' has no len()的一种可能原因
- bandit(21-25)
- 3706 teradata 语句报错_TERADATA中函数的使用
- ffi Error:Dynamic Linking Error:Win32 error 126
热门文章
- 分析原因型思维模型框架_分析营销型网站优化效果不佳的主要原因
- python流程控制几种_python基础流程控制与数据类型
- mysql中ip用什么存,在MySQL中,价钱和IP用什么类型存储最好?
- java编译大项目很慢_优化MyEclipse编译速度慢的问题、build、project clean 慢
- add_axes()——python绘图
- mysql 搭建日志服务器_rsyslog+mysql+loganalyzer 环境搭建日志服务器
- php 上传excel到mysql_PHP上传Excel文件导入数据到MySQL数据库示例
- java匿名内部对象_JavaSE 学习参考:匿名内部类和匿名对象
- python Box-Cox数据变化与逆变化
- python pandas判断是否为空