现在,新增的HTML5元素很多,也给开发者带来了很多便利,比如说:结构标记header 、nav、arctile、section、footer 表单元素:url、date、emaile、search、tel、range、color、datalist、progress、meter、output等,还有一些webstroge元素、绘图元素、拖放api等,这里着重说一下拖放api。

  在生活中,我们经常将桌面的应用程序元素,从一个地方拖拽到另外一个地方,开发者没有一种能实现这种操作的标准技术,在HTML5标准中引入了拖放api,从而实现了这种功能,在拖放API中,一些事件是由(源元素)拖放的元素触发,另外一些事件是由(目标元素)投放的元素触发,源元素事件如下:

  dragstart:当拖动开始的时候,触发这个事件

  drag:源元素发生拖动的时候,触发;与mouseover事件类似

  dragend:当拖动操作结束时,源元素触发这个事件

目标元素事件如下:

  dragenter:拖动操作的过程中,当鼠标指针第一次进入目标区域的时候,就会触发这个事件

  dragover:当对象拖动到目标对象时触发

  drop:当拖动操作在目标元素内投放的时候,目标元素会触发这个事件

  dragleave:在拖动的过程中,被拖放对象离开目标对象时触发

我总觉得,用口述不能清楚的表达意思,还是来段小代码,更加明白,HTML中的代码如下:

<div id="lt">
<!-- 源元素 -->
<img id="img" src="bg.jpg">
</div>
<!-- 目标元素 -->
<div id="rt"></div>

两个div盒子已经设置好了,但是,我们还没给它打扮着装,所以,这时候,就需要css出场了,css代码如下:

#lt {
width : 300px;
height : 200px;
border : 1px solid black;
padding : 20px;
float : left;

margin-right:20px;

}
#rt {
width : 300px;
height : 200px;
border : 1px solid black;
padding : 20px;
float : left;

}

另外呢,这只是将我们的静态页面展现了出来,但是要想实现拖放,当然少不了我们的js了,js代码如下:

<script>
// 获取源元素
var img = document.getElementById("img");
// 绑定拖拽事件 - 默认允许触发的
img.ondragstart = function(event){
console.log(event.dataTransfer);

var trans = event.dataTransfer;
trans.setData("text",event.target.src);

trans.effectAllowed = "move";
console.log("拖放开始");
}
img.ondrag = function(event){
console.log("拖拽过程中...");
}
img.ondragend = function(event){
console.log("结束拖拽啦...");
var lt = document.getElementById("lt");
lt.removeChild(event.target);
}
// 获取目标元素
var rt = document.getElementById("rt");
// 绑定目标元素事件
rt.ondragenter = function(event){
console.log("第一次进入目标区域...");
}
rt.ondragover = function(event){
event.preventDefault();
console.log("拖放到目标对象罗!...");
}
rt.ondrop = function(event){
console.log("投放进去...");
var trans = event.dataTransfer;
var src = trans.getData("text");
rt.innerHTML = "<img src='"+src+"'>";

trans.clearData("text");
}
rt.ondragleave = function(event){
console.log("整个拖放过程结束...");
}
</script>

其中在浏览器运行的时候,打开控制台可以看到整个拖放过程哦,页面开始效果如下:

用鼠标拖放过程中的效果如下图:

拖放后的效果如下图:

好了,简单的HTML5的拖放就到此结束了,希望大家多给意见哦。

浅谈HTML5拖放的更多相关文章

  1. 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  2. 浅谈html5网页内嵌视频

    更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...

  3. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  4. 浅谈html5 video 移动端填坑记

    这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...

  5. 浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  6. 浅谈html5及其新特性

    什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍 ...

  7. 浅谈html5 响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...

  8. (转)浅谈HTML5与css3画饼图!

    神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...

  9. 浅谈 HTML5 的 DOM Storage 机制 (转)

    在开发 Web 应用时,开发者有时需要在本地存储数据.当前浏览器支持 cookie 存储,但其大小有 4KB 的限制.这对于一些 Ajax 应用来说是不够的.更多的存储空间需要浏览器本身或是插件的支持 ...

随机推荐

  1. baidu地图的一个拾取坐标系统

    http://api.map.baidu.com/lbsapi/getpoint/index.html 可以很方便的通过标记取得经纬度坐标 也可以输入经纬度坐标获得地图标记

  2. PHP学习笔记十五【面向对象二】

    <?php class Cat{ //public 访问修饰符 public $name; public $age; } //创建 $cat1=new Cat; $cat1->name=& ...

  3. 第一章 Qt入门

    1.1Qt 窗口部件 widget,用户界面的一个可视化元素,任意窗口部件都可以作为窗口.可以通过简单的HTML修改丰富样式 1.2建立连接 Qt的窗口部件通过发射信号(signal)来表明一个用户动 ...

  4. javascript写的新闻滚动代码

    在企业站中,我们会看到很多新闻列表很平滑的滚动,但是这种功能自己写太浪费时间,下面是我整理好的一组很常用的新闻列表滚动,有上下分页哦! 1.body里面 <div class="tz_ ...

  5. HTML5简单入门系列(三)

    前言 本篇介绍HTML5支持的Web存储(Web Storage)和HTML 5 应用程序缓存. 客户端存储数据介绍 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没 ...

  6. python一句代码建立树

    from collections import defaultdict def tree(): return defaultdict(tree) 上面的代码不难理解,就是利用递归的方式,创建了一个树的 ...

  7. mysqldump 的方式来搭建master-->slave 的复制架构

    1.master 上要满足的最小条件: 1.server_id 已经设置成了一个非0值 2.log_bin 配置好binlog 2.slave 上要满足的最小条件 1.server_id 已经设置成了 ...

  8. libevent for qt网络模块

    libevent for qt网络模块,直接替换qt的select模型,支持epoll,select,pool.使用非常简单,无需修改以前的代码结构 最近在开发im服务器,需要大并发链接.QT默认的是 ...

  9. 【Android病毒分析报告】 - ZooTiger “集恶意推广、隐私窃取、恶意吸费于一体”

    本文章由Jack_Jia编写,转载请注明出处.  文章链接:http://blog.csdn.net/jiazhijun/article/details/11772379 作者:Jack_Jia    ...

  10. java中list、set和map 的区别

    List按对象进入的顺序保存对象,不做排序或编辑操作.Set对每个对象只接受一次,并使用自己内部的排序方法(通常,你只关心某个元素是否属于Set,而不关心它的顺序--否则应该使用List).Map同样 ...