H5的拖放事件(拖拽删除)

Posted 2020-09-26 秋水涴晴汐

 

今天我们来介绍一下h5的拖放事件：

拖放事件

H5的拖放事件提供了多个接口：

1、drag：当元素或者选中的文本被拖动时触发（每几百毫秒触发一次），应用在被拖拽元素上

2、dragend：当拖动操作结束时触发（通过释放鼠标按钮或者点击转义键），应用在被拖拽元素上

3、dragenter：当一个被拖动的元素或者选中的文本进入一个有效的放置目标时触发，应用在目标元素上

4、dragexit：当元素不再是拖动操作的直接选择元素时触发（很少使用）

5、dragleave：当拖动元素或者选中的文本离开有效的放置区域时触发，应用在目标元素上

6、dragover：当元素或者选中的文本被拖动到有效放置区域上方时触发（每几百毫秒触发一次），应用在目标元素上

7、dragstart：当用户开始拖动元素或者拖动选中文本时触发，应用在被拖拽元素上

8、drop：当元素或选中的文本在有效区域放置时触发，应用在目标元素上。

event.dataTransfer

在进行拖放操作时，DataTransfer 对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型

这个对象在所有的拖动事件属性dataTransfer 都是可用的，但是不能单独创建。

dataTransfer方法（比较多，简单罗列几个）

setData()

将指定格式的数据赋值给dataTransfer对象，参数format定义数据的格式也就是数据的类型，data为待赋值的数据，有点像jquery里面的data

如果指定的数据类型不存在，它将添加到的末尾，这样类型列表中的最后一个项目将是新的格式。如果已经存在的数据类型，替换相同的位置的现有数据。就是，当更换相同类型的数据时，不会更改类型列表的顺序。

 

getData(format)

从dataTransfer对象中获取指定格式的数据，format代表数据格式，如果给定类型的数据不存在或者数据转存（data transfer）没有包涵数据，方法将返回一个空字符串。

这个数据将仅仅在放置动作发生时在drop时间中是可用的。

 

下面是个实例，拖拽元素进行删除：

css代码：

* {
margin:0;
padding:0;
}
ul {
list-style:none;
}
li {
width:200px;
height:50px;
background-color:#4590bb;
margin:20px 40px 20px 100px;
}
div {
width:300px;
height:150px;
font-size:40px;
line-height:150px;
text-align:center;
background-color:#b3c6e8;
margin-left:50px;
margin-top:50px;
}

html代码：

<ul>
<li draggable="true" ondragstart="drag(event)" id="li1" ondragend="dend(event)">1</li>
<li draggable="true" ondragstart="drag(event)" id="li2" ondragend="dend(event)">2</li>
<li draggable="true" ondragstart="drag(event)" id="li3" ondragend="dend(event)">3</li>
<li draggable="true" ondragstart="drag(event)" id="li4" ondragend="dend(event)">4</li>
<li draggable="true" ondragstart="drag(event)" id="li5" ondragend="dend(event)">5</li>
<li draggable="true" ondragstart="drag(event)" id="li6" ondragend="dend(event)">6</li>
</ul>
<div id="div" ondragenter="enter(event)" ondragover="over(event)" ondragleave="leave(event)" ondrop="drop(event)">垃圾箱</div>

 js代码：

function drag(event) {
event.target.style.background = "red";
event.dataTransfer.setData("name",event.target.id)
}
function dend(event) {
event.target.style.background = "#4590bb";
}
//拖拽进入标签范围
function enter(event) {
document.getElementById("div").innerHTML = "释放删除";
}
function leave(event) {
document.getElementById("div").innerHTML = "垃圾箱";
}
function drop(event) {

//阻止浏览器默认事件
event.preventDefault();
document.getElementById("div").innerHTML = "正在删除";
var id = event.dataTransfer.getData("name");
var ul = document.getElementsByTagName("ul")[0];
ul.removeChild(document.getElementById(id));
}
function over(event) {
event.preventDefault();