享受生活，热爱重构，大家好，我是Json。
在现在这个到处是HTML5话题的时代，好像不懂点HTML5都有点落伍。那我也跟上潮流一把吧，今天给大家分享的是基于HTML5的自助切图。
在组里经常会被某设计师叫切板仔，确实重构很大一部分工作都花在切图上，而如何提高切图效率或者让切图自助化也是我们重构师的追求。基于这个前提我自己抱着研究的心态，使用HTML5大致实现了一下。一开始觉得HTML5是个很神秘很高深的东西，其实当你去了解他，你会发现他是很空虚，且很容易上…………….手的。
这里使用到的HTML5技术包括：
本地预览(FileReader)
拖拽(drag & drop)
切图(canvas)
拖拽：
拖拽基本事件如下：
DataTransfer 对象 退拽对象用来传递的媒介，使用一般为Event.dataTransfer。 draggable 属性 就是标签元素要设置draggable=true，否则不会有效果，例如： <div title=”拖拽我” draggable=”true”&rt;列表1</div:rt;</td&rt; ondragstart 事件 当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上 ondragenter 事件 当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上 ondragover 事件 拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上 ondrop 事件 被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 ondragend 事件 当拖拽完成后触发的事件，此事件作用在被拖曳元素上 drageleave事件 当拖拽离开此处时触发，只在离开这个对象时触发一次，此事件作用在目标元素上 Event.preventDefault() 方法 阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。 Event.effectAllowed 属性 就是拖拽的效果。图1是页面上所使用到拖拽的地方。左图为拖拽上传图片，右图为拖拽参考线。
介绍完拖拽基本事件后，再来看下页面是如何通过拖拽将本地图片通过拖拽的方式拖到页面指定区域使用图片上传，这也是拖拽现在比较常用到的功能。
给document增加拖拽事件，当拖拽元素进入页面时改变目标元素样式提示用户目标元素位置，当拖拽元素离开页面后还原样式。代码如下：
document.ondragleave = function(e){
e.preventDefault();
var el = document.getElementById('target_box');
el.html' target='_blank'>className = el.className.replace(/over/g,'');
}
document.ondrop = function(e){
e.preventDefault();
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
新闻热点
疑难解答
