HTML5之简单拖放特效原理剖析【原创文章】
从业互联网行业这么久，一直以来做的最多的都是前端的活，后端的项目基本很少接触，除非自己的东西以及客户指定需求才会进行开发！回想2013年5月以美工入道到2015-11-17（今天），也有2年多时间了！
今天回想以前的路程，发现自己居然对目前很多的HTML5+CSS3有种无力感！
是该认真反思自己的想法与观念了！互联网一瞬万变！
以前都是囫囵吞枣的在吸收这块的东西，虽然也能写，但是不一定记得住（Ps：记忆力不太好，没有经常用到）！
2015年11月开始，好好认真学习一遍HTML5+CSS3，也不期望学完之后就能突突突的做一堆高复杂特效！
第一步只要能拿到人家的代码能熟练看懂，熟练修改就行，后面什么复杂的特效肯定跟着经验水涨船高！
讲了一大堆废话，现在开始这个文章的正题！
HTML5之简单拖放特效原理剖析 Q&A环节
Q：为什么叫特效原理剖析
A： 因为这是我自己经过学习之后的理解观点与思路阐述
Q：什么是HTML5之简单拖放特效
A：因为以前要实现拖放特效，基本上都是由很复杂的JS代码去实现的，现在要实现这个特效仅仅需要简单的几个JS代码与HTML5的特性配合就轻松实现了
原理剖析 具体环节
先来张图
http://blog.0796z.com/zb_users/upload/2015/11/201511171447743692324409.png
从上图我们可以看到有三个元素，两个空的DIV元素，一个图片元素
我们要实现的效果：
让图片元素自由来回的在两个DIV元素中来回的拖放
怎么实现四步曲？
在HTML5中
1、为所有元素增加了一个特性属性draggable 这个属性的值类型：Boolean （Ps：不懂布尔类型值的童鞋请百度）
2、为所有被拖放元素都提供了一个关键的 ondragstart 事件，这个事件主要是将被拖放元素的数据进行临时存储到event对象中
3、为所有将要放置数据的元素（中文博大精深，你自个理解吧，简单粗暴的说，就是你要把拖放的数据放到另外一个元素里面，这个另外一个元素叫做将要放置数据的元素，有点啰嗦，继续）提供两个关键的事件：ondragover ，ondrop。
有了这一个属性 三个事件（四部曲），我们就可以顺利实现特效了 ， 下图将是我们要拖动的图片元素
这里图片上传比较麻烦，发在博客了！博客文章链接：http://blog.0796z.com/post/13.html 支持，看起来不错呢！ 支持中国红客联盟(ihonker.org) 支持，看起来不错呢！ 支持中国红客联盟(ihonker.org) 还是不错的哦，顶了 学习学习技术，加油！ 支持，看起来不错呢！ 支持中国红客联盟(ihonker.org)
页:
[1]