HTML5 File API — 拖拽显示

2020-12-13 03:41

阅读：269

YPE HTML>

标签：style blog http java color 文件

1、HTML5拖拽

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

如果是html中的元素，要进行拖动，需要设置draggable为true。

下面的代码显示了img在两个div里任意拖动。

View Code

代码注释：

　　调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

　　通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

　　被拖数据是被拖元素的 id ("drag1")

　　把被拖元素追加到放置元素（目标元素）中

（代码示例来自w3cSchool）

2、将HTML5 File API — 打开本地图片并预览示例简单的修改，就可以实现拖拽显示。

 1 12 
13 
14 
15     拖过来试试
16 
17 18 
19

View Code

HTML5 File API — 拖拽显示,搜素材,soscw.com

HTML5 File API — 拖拽显示

标签：style blog http java color 文件

原文地址：http://www.cnblogs.com/zjzhome/p/3815500.html

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：HTML5 File API — 拖拽显示
文章链接：http://soscw.com/essay/28116.html

亲，登录后才可以留言！