周记（HTML5拖拽）

最新推荐文章于 2021-06-30 23:21:32 发布

凌晨1点21分

最新推荐文章于 2021-06-30 23:21:32 发布

阅读量766

点赞数

分类专栏：学习成长-生活记录 web前端文章标签： html5 html5拖拽拖动事件前端

本文链接：https://blog.csdn.net/cb2474600377/article/details/50562958

版权

学习笔记同时被 3 个专栏收录

58 篇文章 1 订阅

订阅专栏

web前端

24 篇文章 0 订阅

订阅专栏

学习成长-生活记录

17 篇文章 0 订阅

订阅专栏

这几天简单的了解了下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)

当然这里只是简单的拖拽，需要画流程图还需要连线以及获取连线间的关系，后续将继续学习和使用相关流程图制作的插件。