这几天简单的了解了下html5的拖拽事件，项目有画流程图的部分，当然目前画流程图部分是用flash做的，但了解到html5的的拖拽事件后，可以用html5做个一个画流程图的工具，当然现在画流程图的前端插件有很多了。这里先简单的了解了html5的拖拽事件以及拖拽事件的简单使用。
下面有个简单实例
<!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" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" οndragstart="drag(event)" width="336" height="69" />
</body>
</html>
1.设置元素为可拖放draggable
首先，为了使元素可拖动，把draggable 属性设置为 true ：
2.拖动事件ondragstart和拖动的数据设置dataTransfer.setData()
ondragstart事件表示拖动开始事件，其中在该事件触发的函数中的dataTransfer.setData()来设置被拖动的相关数据，格式为 setData(key,value);
3.放置位置设置 - ondragover
ondragover事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法
4.放置事件 - ondrop
当放置被拖数据时，会发生drop事件。在上面的例子中，ondrop属性调用了一个函数，drop(event)其中：
a.调用preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
b.通过dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在setData() 方法中设置的任何数据。格式为getDate(key)
当然这里只是简单的拖拽，需要画流程图还需要连线以及获取连线间的关系，后续将继续学习和使用相关流程图制作的插件。
6895
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
