html5 拖拽（一）

最新推荐文章于 2024-04-20 11:06:33 发布

shentibeitaokong

最新推荐文章于 2024-04-20 11:06:33 发布

阅读量213

点赞数

文章标签： html5 拖拽笔记

本文链接：https://blog.csdn.net/shentibeitaokong/article/details/81163352

版权

h5中新增拖拽，新增拖拽与拖放的api

先放一下 w3c的第一个demo

<!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>

顺序：

ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上

首先必须设置被拖放的元素 draggable=true 这个属性，才能被拖动，
start方法，Event.dataTransfer（拖拽对象用来传递的媒介）.setData()，被拖放元素的数据类型和值，
over方法必须要写上ev.preventDefault()来阻止对元素的默认处理方式，否则ondrop事件不会被触发。
drop方法调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开），getData来返回之前setData的id为特定的dom元素，将其追加到放置元素上

这只是单方面的拖拽，来回拖拽其实也很简单，只需将ondrop元素包裹拖拽元素即可

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)"
ondragover="allowDrop(event)">
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</div>

以上就是最最基础的知识。后续会进行拓展。