浅谈 HTML5 的 Drag and Drop

前言

这里引用 PPK 大神一篇文章 The HTML5 drag and drop disaster 里面的一段话作为开始:

After spending about a day and a half in testing I am forced to conclude that the HTML5 drag and drop module is not just a disaster, it’s a fucking disaster.

可想而知,这货是有多么坑爹啦?不过 PPK 的文章我确实也没仔细看,只是在翻阅资料的时候,偶尔看见了,然后第一句话就让我感同身受,好吧,那接下来就与 DND 战斗吧!

需求

大致说一下需求,这里需要完成一个拖拽上传的功能,相信这也是老生常谈了,2、3年前 Gmail 便实现了,国内各网站也有了不同程度的支持,点点网 一贯以追求良好的用户体验为楷模,所以今年年初他们也推出了这个功能。但是总体来说,通过细致的体验后发现,细节方面做得还是不够完善。

做完整个功能之后,我总结一下我所希望考虑到的细节吧:

  1. 有东西拖动进入页面,需要有反馈,知道这是一个拖动;
  2. 设定一个允许 drop 的区域,文件拖入此区域才算是一个正确的用户行为,并有相关反馈提示此处可以 drop,其他区域无法 drop,如果用户提前释放鼠标,则会有相关的 revert 的动画出现(貌似这个就 Mac 下会有,Windows 一切尽在不言中);
  3. drop 成功后,前端拿到适合的图片文件,直接通过 dataURI 进行展示,然后通过兼容之前 form 表单提交接口,后台完成图片数据的后端提交,基本做到平滑、用户无感;
  4. 考虑到浏览器其他插件会也会充分运用到 Drag and Drop 的因素,尽量做到不影响其他脚本功能。

大致就那么多吧,前三点是开始完成需求时就一直要求完成的,也是其中最纠结的地方,充分让我体会到了 DND 事件和API是如何的 sucks!!!
阅读全文…

写在生日今天

第23个生日就这样平静地来,平淡的去,没有过多的祝福,没有过多的庆祝,IM 上的一些问候,短信里的几个文字,这也许就是信息世代的结果,也许就是工作后平淡的开始……

毕业

毕业时,也未曾有过一点儿文字的记忆,可是回头看,已经远远离去。现在眼前还会依稀浮现出室友的感叹“还有一个月”,“还有十天吧”,“没有几天了”,直到最后的聚餐,拿证,匆忙的离别。是的,我的大学就这样结束了,给我留下最深刻印象的只有友情和爱情。也许这就是一个完美的结局了,最后毕业的两张纸,以及满当当的情。只能感叹岁月无情,4年转瞬即逝!依然还在回忆大一和你们三打扮寝室,与里面俩一课不落地学习,食堂听你俩的故事,和你们俩忐忑地面对第一次面试,和你逐渐走到一起。四年里发生了太多,你们一直陪我经历,四年后就淡然,感觉一切又都那么淡了,逐渐都不在我身边了。

是啊,就是大学的这份情最真,最纯,谢谢你们!

工作

最后的工作还是来到了自己心仪的一个地方,工作节奏也逐渐地适应过来,感觉还是比较适合自己的。就是工作后每天整个人都会处于一种很疲惫的状态,可能还没有从学校状态中转变过来吧。下班之后,整个人都会比较懒,正好家里有电视,就会漫无目的地看电视,哎~~其实很多书都堆着还没看呢,这种状态还是要改变吧,总是得从书本中学到些赶货,也要保持先进性啊!

最后

以上这篇文章又水了,本来还算抒情的感觉被一个电话搅乱了,好吧~~不过最近有一篇工作中技术方面的干货会尽快准备出来呢,总算是又改来点儿技术的东西了,哈哈 :)

= EOF =