HTML5 如何实现拖拽效果
Posted 振长策而御宇内
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5 如何实现拖拽效果相关的知识，希望对你有一定的参考价值。
最近有一个项目，需要做一个页面效果，就是将页面中的图片元素拖拽到指定的位置并进行保存，页面加载后自动载人上次拖拽的位置（比如页面中有一医院的平面简图，现在想把某一温度传感器设备的简图放到指定的房间），开始的时候想用Flex或者Flash做，可惜这两个都不会，在网上找了几个实现拖拽的例子，终于可以拖拽图片啦，但是在与数据库交互时，如何存储并再次显示图片的坐标犯了难。
这两天在看html5，发现HTML5可以直接实现拖拽，这样相比Flash，既不需要插件支持，也不需要在于数据库交互时发生问题。
这是在W3School上看到的实现拖拽的教程 点击打开链接
这是W3School上面可运行的例子 拖拽例子
上面的例子实现的是在两个<div>中实现拖拽图片，其实实现拖拽效果只需要以下几步：
1. 设置被拖拽元素属性为可拖放，draggable = "true"
2. 设置拖动时响应的事件，即拖动时元素效果，ondragstart = "drag(event)" ，下面的函数dataTransfer.setData设置拖拽元素的数据类型和值
function drag(ev)
ev.dataTransfer.setData("Text",ev.target.id);
3. 设置div允许其他元素放到上面，οndragοver="allowDrop(event)"
function allowDrop(ev)
ev.preventDefault();
4. 设置元素放到div上的响应事件，οndrοp="drop(event)"
function drop(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
其实就是把元素设置成div的子元素
下面是完整的代码：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;
</style>
<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" οndrοp="drop(event)" οndragοver="allowDrop(event)">
<img src="/i/w3school_logo_black.gif" draggable="true" οndragstart="drag(event)" id="drag1" />
</div>
<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
</body>
</html>只要把每个屋子设置成可以将元素拖拽上去的div就行啦，下次加载的时候直接将元素设置成该div的子元素，可是还有重复拖拽，覆盖等情况需要考虑。
以上是关于HTML5 如何实现拖拽效果的主要内容，如果未能解决你的问题，请参考以下文章
HTML5+Three.js实现可拖拽的虚拟天空环境全景动画
HTML5+Three.js实现的可拖拽镜面反射与球面折射全景动画