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

HUC-逍遥

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

回想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

小龙

支持，看起来不错呢！

admin1964

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

菜鸟小羽

支持，看起来不错呢！

若冰

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

wtsqq123

还是不错的哦，顶了

小龙

学习学习技术，加油！

perble

支持，看起来不错呢！

ruguoruo

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