网上看到的，封装得挺好的es5代码。
/**
* 表格拖动操作
*/
/**
* 拖动设置
* @param { id:"boxId", dragDrop:"拖动释放的回调", action:"up/down默认的拖动添加方式，可以不填写" } option
* @param { drag-item:"拖动的item" }
*/
function SetDragBox(option){
if(!option){
throw "拖动选项没有设置";
}
if(!option.id){
throw "拖动的容器id没有设置";
}
this.id = option.id;
this.action = option.action;
this.box = document.getElementById(this.id);
this.items = this.box.getElementsByClassName("drag-item");
this.dragDrop = option.dragDrop;
this.init();
}
SetDragBox.prototype.init = function(){
this.addListener();
}
SetDragBox.prototype.addListener = function(){
var that = this;
function addListen(type, cb){
for(var i = 0;i < that.items.length;i++){
that.items[i].addEventListener(type, cb);
}
}
// 开始拖动的时候触发的事件监听
addListen('dragstart', function(e){
var _this = e.target;
that.dragTarget = _this;
var event = e.dataTransfer ? e : e.originalEvent && e.originalEvent.dataTransfer ? e.originalEvent : window.event;
event.dataTransfer.setData("Text", "store");
})
addListen('drag', function(e){
})
// 拖动过程中触发的事件监听
addListen('dragover', function(e){
e.preventDefault();
})
// 释放的触发的事件监听
addListen('drop', function(e){
var _this = e.target;
e.preventDefault();
if(!/drag-item/.test(_this.className)){
var flag = true;
while (flag) {
_this = _this.parentNode;
if(/drag-item/.test(_this.className)){
flag = false;
}
if(_this.tagName.toUpperCase == "BODY"){
flag = false;
}
}
}
if(_this.tagName.toUpperCase == "BODY"){
throw new Error('the className of this parents is not matched drag-item');
}
/**
* 根据拖动元素和目标元素在文档中的位置来进行判断放置的插入位置
* compareDocumentPosition
*/
var compare = _this.compareDocumentPosition(that.dragTarget);
action = that.action ? that.action : compare == 2 ? 'down' : 'up';
if(action == "up"){
_this.parentNode.insertBefore(that.dragTarget, _this);
}else{
_this.parentNode.insertBefore(that.dragTarget, _this.nextSibling);
}
if(that.dragDrop){
that.dragDrop();
}
})
}使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>item1</th>
<th>item2</th>
<th>item3</th>
<th>item4</th>
</tr>
</thead>
<tbody id="dragBox">
<tr draggable="true" class="drag-item">
<td>item01</td>
<td>item12</td>
<td>item13</td>
<td>item14</td>
</tr>
<tr draggable="true" class="drag-item">
<td>item02</td>
<td>item12</td>
<td>item13</td>
<td>item14</td>
</tr>
<tr draggable="true" class="drag-item">
<td>item03</td>
<td>item12</td>
<td>item13</td>
<td>item14</td>
</tr>
<tr draggable="true" class="drag-item">
<td>item04</td>
<td>item12</td>
<td>item13</td>
<td>item14</td>
</tr>
<tr draggable="true" class="drag-item">
<td>item05</td>
<td>item12</td>
<td>item13</td>
<td>item14</td>
</tr>
<tr draggable="true" class="drag-item">
<td>item06</td>
<td>item12</td>
<td>item13</td>
<td>item14</td>
</tr>
<tr draggable="true" class="drag-item">
<td>item07</td>
<td>item12</td>
<td>item13</td>
<td>item14</td>
</tr>
<tr draggable="true" class="drag-item">
<td>item08</td>
<td>item12</td>
<td>item13</td>
<td>item14</td>
</tr>
<tr draggable="true" class="drag-item">
<td>item09</td>
<td>item12</td>
<td>item13</td>
<td>item14</td>
</tr>
<tr draggable="true" class="drag-item">
<td>item10</td>
<td>item12</td>
<td>item13</td>
<td>item14</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
/**
* 表格拖动操作
*/
/**
* 拖动设置
* @param { id:"boxId", dragDrop:"拖动释放的回调", action:"up/down默认的拖动添加方式，可以不填写" } option
* @param { drag-item:"拖动的item" }
*/
function SetDragBox(option) {
if (!option) {
throw "拖动选项没有设置";
}
if (!option.id) {
throw "拖动的容器id没有设置";
}
this.id = option.id;
this.action = option.action;
this.box = document.getElementById(this.id);
this.items = this.box.getElementsByClassName("drag-item");
this.dragDrop = option.dragDrop;
this.init();
}
SetDragBox.prototype.init = function () {
this.addListener();
}
SetDragBox.prototype.addListener = function () {
var that = this;
function addListen(type, cb) {
for (var i = 0; i < that.items.length; i++) {
that.items[i].addEventListener(type, cb);
}
}
// 开始拖动的时候触发的事件监听
addListen('dragstart', function (e) {
var _this = e.target;
that.dragTarget = _this;
var event = e.dataTransfer ? e : e.originalEvent && e.originalEvent.dataTransfer ? e.originalEvent : window.event;
event.dataTransfer.setData("Text", "store");
})
addListen('drag', function (e) {
})
// 拖动过程中触发的事件监听
addListen('dragover', function (e) {
e.preventDefault();
})
// 释放的触发的事件监听
addListen('drop', function (e) {
var _this = e.target;
e.preventDefault();
if (!/drag-item/.test(_this.className)) {
var flag = true;
while (flag) {
_this = _this.parentNode;
if (/drag-item/.test(_this.className)) {
flag = false;
}
if (_this.tagName.toUpperCase == "BODY") {
flag = false;
}
}
}
if (_this.tagName.toUpperCase == "BODY") {
throw new Error('the className of this parents is not matched drag-item');
}
/**
* 根据拖动元素和目标元素在文档中的位置来进行判断放置的插入位置
* compareDocumentPosition
*/
var compare = _this.compareDocumentPosition(that.dragTarget);
action = that.action ? that.action : compare == 2 ? 'down' : 'up';
if (action == "up") {
_this.parentNode.insertBefore(that.dragTarget, _this);
} else {
_this.parentNode.insertBefore(that.dragTarget, _this.nextSibling);
}
if (that.dragDrop) {
that.dragDrop();
}
})
}
</script>
<script>
new SetDragBox({
id: 'dragBox',
dragDrop: function () {
console.log("drop");
}
});
</script>
</html>