sortable.js 官网
拖放排序插件Sortable.js中文介绍
1. 安装 npm 或 yarn 安装
2. 使用
效果：
3. 小结
事件：
onChoose ：function 列表单元被选中的回调函数
onStart ：function 列表单元拖动开始的回调函数
onEnd ：function 列表单元拖放结束后的回调函数
onAdd ：function 列表单元添加到本列表容器的回调函数
onUpdate ：function 列表单元在列表容器中的排序发生变化后的回调函数
onRemove ：function 列表元素移到另一个列表容器的回调函数
onFilter ：function 试图选中一个被filter过滤的列表单元的回调函数
onMove ：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数
onClone ：function 当创建一个列表单元副本的时候的回调函数
事件对象：
to ：HTMLElement--移动到列表容器
from ：HTMLElement--来源的列表容器
item ：HTMLElement--被移动的列表单元
clone ：HTMLElement--副本的列表单元
oldIndex ：number/undefined--在列表容器中的原序号
newIndex ：number/undefined--在列表容器中的新序号
方法
option(name[,value])
获得或者设置项参数，使用方法类似于jQuery用法，没有第二个参数为获得option中第一个参数所对应的值，有第二个参数时，将重新赋给第一个参数所对应的值；
toArray()
序列化可排序的列表单元的data-id（可通过配置项中dataIdAttr修改）放入一个数组，并返回这个数组中
sort()
通过自定义列表单元的data-id的数组对列表单元进行排序
save()
destroy()
是一个两年前的项目了。 最近增加一个新的模块，做音频和视频的通道。 为了做音视频的素材的替换，做的拖曳： 实现两个列数据不同的表格之间的行数据的替换，以及行的增加。 由于当初项目是基于jquery的，所以一下内容也是基于jquery的，但是思想和方法是通用的，需要的小伙伴，如果你的项目是基于vue的也可以看下思路。 也许会找到方法解决你现在的需求。
如上的两个表格，我要实现的就是把右边表格的表格行拖曳到左边，但是左边的不可拖曳到右边； 且拖曳到右边表格的空白行的时候，就是添加； 如果是覆盖在表格行上，就是替换数据
给 两个表格的tbody 分别赋予id ； 以上的#fileGetTableTbody 是右边的表格tbody的id，#trueFileTableDataTbody是左边的。
group1 和 group2 中的各个参数与方法 其他的都不多说了（可以去看sortable.js的文档，非常的清晰）
我只说一下两个group的参数，首先，name属性值必须设置一致（组名）； 然后是pull ，我这边采用clone的方式去拖曳，put：是可放置，group2是左边被放置的表格所以put设置为true
在group1中的onMove方法中，设置evt.dragged.innerHTML = '' 把拖曳的元素的内容置空；即能解决以上问题，而且还会隐藏插件默认的放置位置中元素内容的显示。
给tbody增加一个tr ，这个 tr的高度，利用table的高度 - tbody的高度， 去动态设置。 写成下图所示的功能函数，在每次删除行，增加行的时候都执行一次，这样动态的利用 tr 去填充tbody剩余的空间，使得放置永远有效。 但是一定要记得，给tr中放置td, 否则不起作用
丢失了，就把他找回来！ 方法就在group1的onMove方法和onEnd中，利用onEnd方法中的to字段判断当前放置的目标容器是什么，如果是自己本身，就把之前在onMove中存储的tr的子数据，赋值给 tr，这样就解决了。
if(tr_length >evt.newIndex &&tr_length !== 0 &&class_have == false) ， 你们可根据自己需求做调整；
所有的替换方法都在group2的onAdd中，由于我这边替换的时候，要求信号格式相符，以及音频默认信号格式，所以我多了很多判断。 但是我目前需要替换的数据只有素材名称和素材地址； 你们可仿照条件进行判断。
以上全部，有些复杂，但是对于不同表格的表格行之间的拖曳，增加行，替换行数据，还是能实现的。
如果有更好的方法，请留言，谢谢！
<!doctype html><html>
<head>
<title>表格行拖动</title>
<script>
window.onload = function(){
//绑定事件
var addEvent = document.addEventListener ? function(el,type,callback){
el.addEventListener( type, callback, !1 )
} : function(el,type,callback){
el.attachEvent( "on" + type, callback )
}
//移除事件
var removeEvent = document.removeEventListener ? function(el,type,callback){
el.removeEventListener( type, callback )
} : function(el,type,callback){
el.detachEvent( "on" + type, callback)
}
//精确获取样式
var getStyle = document.defaultView ? function(el,style){
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
} : function(el,style){
style = style.replace(/\-(\w)/g, function($, $1){
return $1.toUpperCase()
})
return el.currentStyle[style]
}
var dragManager = {
clientY:0,
draging:function(e){//mousemove时拖动行
var dragObj = dragManager.dragObj
if(dragObj){
e = e || event
if(window.getSelection){//w3c
window.getSelection().removeAllRanges()
}else if(document.selection){
document.selection.empty()//IE
}
var y = e.clientY
var down = y >dragManager.clientY//是否向下移动
var tr = document.elementFromPoint(e.clientX,e.clientY)
if(tr &&tr.nodeName == "TD"){
tr = tr.parentNode
dragManager.clientY = y
if( dragObj !== tr){
tr.parentNode.insertBefore(dragObj, (down ? tr.nextSibling : tr))
}
}
}
},
dragStart:function(e){
e = e || event
var target = e.target || e.srcElement
if(target.nodeName === "TD"){
target = target.parentNode
dragManager.dragObj = target
if(!target.getAttribute("data-background")){
var background = getStyle(target,"background-color")
target.setAttribute("data-background",background)
}
//显示为可移动的状态
target.style.backgroundColor = "#ccc"
target.style.cursor = "move"
dragManager.clientY = e.clientY
addEvent(document,"mousemove",dragManager.draging)
addEvent(document,"mouseup",dragManager.dragEnd)
}
},
dragEnd:function(e){
var dragObj = dragManager.dragObj
if (dragObj) {
e = e || event
var target = e.target || e.srcElement
if(target.nodeName === "TD"){
target = target.parentNode
dragObj.style.backgroundColor = dragObj.getAttribute("data-background")
dragObj.style.cursor = "default"
dragManager.dragObj = null
removeEvent(document,"mousemove",dragManager.draging)
removeEvent(document,"mouseup",dragManager.dragEnd)
}
}
},
main:function(el){
addEvent(el,"mousedown",dragManager.dragStart)
}
}
var el = document.getElementById("table")
dragManager.main(el)
}
</script>
<style>
.table{
width:60%
border: 1px solid red
border-collapse: collapse
}
.table td{
border: 1px solid red
height: 20px
}
</style>
</head>
<body>
<h1>表格行拖动</h1>
<table id="table" class="table">
<tbody>
<tr>
<td>1</td>
<td>One</td>
<td>dom.require</td>
</tr>
<tr id="2" >
<td class="2">2</td>
<td>Two</td>
<td>ControlJS </td>
</tr>
<tr id="3" >
<td class="3">3</td>
<td>Three</td>
<td>HeadJS</td>
</tr>
<tr id="4" >
<td class="4">4</td>
<td>Four</td>
<td>LAB.js</td>
</tr>
<tr id="5" >
<td class="5">5</td>
<td>Five</td>
<td>$script.js</td>
</tr>
<tr id="6" >
<td class="6">6</td>
<td>Six</td>
<td>NBL.js</td>
</tr>
</tbody>
</table>
</body>
</html>
