利⽤HTML5新特性实现拖拽交换表格单元格元素利⽤HTML5新特性实现拖拽交换表格单元格元素
HTML5新特性：拖放
拖放
拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖⼊不同的位置。
拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。
浏览器⽀持
表格中的数字指⽰了完全⽀持拖放的⾸个浏览器版本。
HTML 拖放实例
下列是关于拖放的简单例⼦：
实例
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data = Data("text");
ev.target.ElementById(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>
实例⽹址：
拖放事件详解
1. 把元素设置为可拖放
⾸先，为了把⼀个元素设置为可拖放，请把它的 draggable 属性设置为 true：
<img draggable="true">
2. 设置拖放的内容 - ondragstart 和 setData()
然后，规定当元素被拖动时发⽣的事情。
在上⾯的例⼦中，ondragstart 属性调⽤了⼀个 drag(event) 函数，规定拖动什么数据。
dataTransfer.setData() ⽅法设置被拖动数据的数据类型和值：
function drag(ev){
ev.dataTransfer.setData("text", ev.target.id);
}
在本例中，数据类型是 “text”，⽽值是这个可拖动元素的 id (“drag1”)。
3. 设置拖到何处 - ondragover
ondragover 事件规定被拖动的数据能够被放置到何处。
默认地，数据/元素⽆法被放置到其他元素中。为了实现拖放，我们必须阻⽌元素的这种默认的处理⽅式。
这个任务由 ondragover 事件的 event.preventDefault() ⽅法完成：
function allowDrop(ev){
ev.preventDefault();
}
4. 进⾏放置 - ondrop
当放开被拖数据时，会发⽣ drop 事件。
在上⾯的例⼦中，ondrop 属性调⽤了⼀个函数，drop(event)：
function drop(ev){
ev.preventDefault();
var data = Data("text");
ev.target.ElementById(data));
}
代码解释：
1. 调⽤ preventDefault() 来阻⽌数据的浏览器默认处理⽅式（drop 事件的默认⾏为是以链接形式打开）
2. 通过 Data() ⽅法获得被拖的数据。该⽅法将返回在 setData() ⽅法中设置为相同类型的任何数据
3. 被拖数据是被拖元素的 id (“drag1”)
4. 把被拖元素追加到放置元素中
项⽬实战运⽤
<table
width="100%"
border="1"
cellpadding="4"
cellspacing="0">
<tr > <th>时间段</th>
<th>星期⼀</th>
<th>星期⼆</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期⽇</th>
</tr>
<tr >
<td>时间段</td>
<td>……</td>
<!-- 已省略不重要的部分，主要实现以下两个单元格的拖拽交换 -->
<td>
<div @drop="drop($event)"@dragover="allowDrop($event)"
draggable="true"@dragstart="drag($event)":id="test1.saturday.id">
{{test1.saturday.user}}
</div>
</td>
<td>
<div @drop="drop($event)"@dragover="allowDrop($event)"
draggable="true"@dragstart="drag($event)":id="test1.sunday.id">
{{test1.sunday.user}}
</div>
</td>
</tr>
</table>
// 实现拖拽交换单元格内元素
function allowDrop(ev:any){
ev.preventDefault();
}
// 拖动时触发
function drag(ev:any){
ev.dataTransfer.setData("id", ev.target.id);
ev.target.style.border ="1px solid yellow";
ev.target.style.cursor ="pointer";
}
// 放下后触发
function drop(ev:any){
ev.preventDefault();
var data = Data("id");
html表格元素ElementById(data), ev.currentTarget);
ev.target.style.border ="1px solid yellow";
ev.target.style.cursor ="pointer";
/
/ 发送交换请求
axios.post('/apply/manager/arrange',{
"method":"exchange",
"shiftFirstId": data,
"shiftSecondId": ev.target.id,
}).then((res:any)=>{
de ===200){
message.success(res.msg);
}else{
<(res.msg);
}
})
}
// 交换元素
function swapElements(a:any, b:any){
// 交换两个dom元素
if(a == b)return;
//记录⽗元素
var bp = b.parentNode;
var ap = a.parentNode;
//记录下⼀个同级元素
var an = a.nextElementSibling;
var bn = b.nextElementSibling;
//如果参照物是邻近元素则直接调整位置
if(an == b)return bp.insertBefore(b, a);
if(bn == a)return ap.insertBefore(a, b);
ains(b)){
//如果a包含了b
return ap.insertBefore(b, a), bp.insertBefore(a, bn);
}else{
return bp.insertBefore(a, b), ap.insertBefore(b, an);
}
}
踩坑记录
1. 因为需求要做到两个元素的拖拽交换，所以这两个元素都要设置draggable为true并绑定ondrop, ondragstart, ondragover事件。
2. 在drop⽅法中，不能简单的⽤ev.target.ElementById(data))来实现，如果⽤这种⽅法实际上是将元素
1的内容追加到元素2的dom中，⽆法达到交换的效果。
3. 也不能⽤ElementById(data), ev.target.firstChild)来做互换，会出现bug。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。