H5 拖放drag跟drop

最新推荐文章于 2023-08-21 08:49:42 发布

宇臾

最新推荐文章于 2023-08-21 08:49:42 发布

阅读量639

点赞数

分类专栏： js 文章标签： H5-drag

本文链接：https://blog.csdn.net/sinat_34349564/article/details/66970215

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

H5的拖放功能主要是通过drag和drop来实现的，目前IE9、Firefox、Opera 12、Chrome 以及 Safari 5 是支持拖放的，Safari 5.1.2 中不支持拖放。下面先放一个代码实例：

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1{
   width:12rem;
   height:12rem;
   float:left;
}
#drag1{
   width:10rem;
   height:10rem;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="001.jpg" draggable="true"
ondragstart="drag(event)"/>
<script>
function allowDrop(event)
{
event.preventDefault();
}

function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}

function drop(event)
{
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>

从上面实例中可以看到js中有三个函数，通过解读这三个函数的功能可以发现H5实现拖放效果是很简单的，下面就介绍一下具体的过程：
1、首先我们要知道被拖放的元素是什么，然后给它添加一个可拖放的属性即draggable的值设置为true
，然后我们要给它添加一个拖放发生事件ondragstart并绑定一个drag( )函数，在drag（）函数里面我们添加一个dataTransfer.setData() 方法，设置被拖数据的数据类型和值：
function drag(event) { event.dataTransfer.setData("Text",event.target.id); }
这里其实就是一个id的字符串，方便后面通过id来捕获这个元素并进行放置。

2、然后我们要知道元素放在哪里，就要设置一个ondragover事件，默认地我们无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法：
function allowDrop(event) { event.preventDefault(); }

3、最后我们将元素进行放置，设置ondrop事件并绑定一个drop(）函数：
function drop(event) { event.preventDefault(); var data=event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); }
其中event.preventDefault()方法是为了避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开），event.dataTransfer.getData(“Text”)是获取前面设置的被拖放的数据，然后用appendChild( )方法对拖放元素进行放置。