HTML5之简单拖放特效原理剖析【原创文章】

HUC-逍遥 · 发表于 2015-11-17 18:00:15

从业互联网行业这么久，一直以来做的最多的都是前端的活，后端的项目基本很少接触，除非自己的东西以及客户指定需求才会进行开发！

回想2013年5月以美工入道到2015-11-17（今天），也有2年多时间了！

今天回想以前的路程，发现自己居然对目前很多的HTML5+CSS3有种无力感！

是该认真反思自己的想法与观念了！互联网一瞬万变！

以前都是囫囵吞枣的在吸收这块的东西，虽然也能写，但是不一定记得住（Ps：记忆力不太好，没有经常用到）！

2015年11月开始，好好认真学习一遍HTML5+CSS3，也不期望学完之后就能突突突的做一堆高复杂特效！

第一步只要能拿到人家的代码能熟练看懂，熟练修改就行，后面什么复杂的特效肯定跟着经验水涨船高！

讲了一大堆废话，现在开始这个文章的正题！

HTML5之简单拖放特效原理剖析 Q&A环节
Q：为什么叫特效原理剖析

A：因为这是我自己经过学习之后的理解观点与思路阐述

Q：什么是HTML5之简单拖放特效

A：因为以前要实现拖放特效，基本上都是由很复杂的JS代码去实现的，现在要实现这个特效仅仅需要简单的几个JS代码与HTML5的特性配合就轻松实现了

原理剖析具体环节

先来张图

从上图我们可以看到有三个元素，两个空的DIV元素，一个图片元素

我们要实现的效果：

让图片元素自由来回的在两个DIV元素中来回的拖放

怎么实现四步曲？

在HTML5中

      1、为所有元素增加了一个特性属性  draggable 这个属性的值类型：Boolean （Ps：不懂布尔类型值的童鞋请百度）

      2、为所有被拖放元素都提供了一个关键的 ondragstart 事件，这个事件主要是将被拖放元素的数据进行临时存储到event对象中

      3、为所有将要放置数据的元素（中文博大精深，你自个理解吧，简单粗暴的说，就是你要把拖放的数据放到另外一个元素里面，这个另外一个元素叫做将要放置数据的元素，有点啰嗦，继续）提供两个关键的事件：ondragover ，ondrop。

有了这一个属性三个事件（四部曲），我们就可以顺利实现特效了，下图将是我们要拖动的图片元素
这里图片上传比较麻烦，发在博客了！博客文章链接：http://blog.0796z.com/post/13.html

Mrlin · 发表于 2015-11-17 21:44:44

提示: 作者被禁止或删除内容自动屏蔽

小龙 · 发表于 2015-11-18 07:19:58

支持，看起来不错呢！

admin1964 · 发表于 2015-11-19 15:13:02

支持中国红客联盟(ihonker.org)

菜鸟小羽 · 发表于 2015-11-19 17:39:58

支持，看起来不错呢！

若冰 · 发表于 2015-11-20 04:34:34

支持中国红客联盟(ihonker.org)

wtsqq123 · 发表于 2015-11-20 12:59:50

还是不错的哦，顶了

小龙 · 发表于 2015-11-20 13:19:49

学习学习技术，加油！

perble · 发表于 2015-11-20 17:58:45

支持，看起来不错呢！

ruguoruo · 发表于 2015-11-21 10:31:43

支持中国红客联盟(ihonker.org)

HTML5之简单拖放特效原理剖析【原创文章】

评分

相关帖子

指导单位

旗下站点

联系我们