<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>
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()
