以前,我们做过JS拖动DIV层的,比如“js实现div拖动功能
”。进入HTML5时代,我们也可以用HTML5的代码来实现拖动,对哦,我们之前也做过一个HTML5拖动的,不过,那个是实现从桌面拖动文件到浏览器,“HTML5实现图片拖放特效”,有兴趣的可以看下。
HTML5为我们提供了ondragstart,ondragover,ondrop这三个函数,我不禁想到了做js触屏时的touchstart,touchmove,touchend,看来,代码的设计思路都是差不多的啊。
要让对像可以拖动,可以设置draggable为true,但我设了一下,默认就是为true的啊。。。
我们为拖动的图片ondragstart时加上drag方法,dataTransfer的setData让我们实现了对像以text的模式传递。当 拖动到圣像上面时,ondragover事件发生,这时,preventDefault()生效,因为默认是无法将元素拖动到其它元素中的。。当我们的鼠 标放开时,ondrop事件发生。我们再次写上preventDefault的原因是drop事件的默认行为是以链接形式打开的。不过,我尝试不写,好像 没什么影响。。。接着,我们通过getData获取到对像,将图片放到div中,完成任务。
原文:http://www.cnblogs.com/jiaze/p/5061188.html