HTML5中拖放效果

来源:互联网 发布:图知天下 编辑:程序博客网 时间:2024/05/01 12:41

拖放(Drag 和 drop)是 HTML5 标准的组成部分。

html中的拖放效果的实现是要借助javaScript的,下面有一个简单的例子:

源代码:

<!DOCTYPE HTML><html><head><script type="text/javascript">function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script></head><body><div id="div1" ondrop="drop(event)"ondragover="allowDrop(event)"></div><img id="drag1" src="img_logo.gif" draggable="true"ondragstart="drag(event)" width="336" height="69" /></body></html>

其实到后来用到框架的时候不用直接自己来写这些代码来实现拖放的效果,在JQuery中和bootstrap中可以直接来使用这些效果十分方便。


0 0
原创粉丝点击