下面是简单的js代码实现：仅供参考：
<style>
#div1{ width:100px height:100px background:red position:absolute left:0px top:0}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1')
var iSpeedX=0
var iSpeedY=0
var lastX=0
var lastY=0
var timer=null
oDiv.onmousedown=function(ev){ //div的鼠标按下事件，主要计算鼠标当前位置，和移动位置。这样可以计算出鼠标移动速度。
var oEvent=ev || event
var disX=oEvent.clientX-oDiv.offsetLeft
var disY=oEvent.clientY-oDiv.offsetTop
clearInterval(timer)
document.onmousemove=function(ev){ //鼠标拖动事件。
var oEvent=ev || event
oDiv.style.left=oEvent.clientX-disX+'px'
oDiv.style.top=oEvent.clientY-disY+'px'
iSpeedX=oEvent.clientX-lastX
iSpeedY=oEvent.clientY-lastY
lastX=oEvent.clientX
lastY=oEvent.clientY
}
document.onmouseup=function(){ //当鼠标抬起后，清掉移动事件。
document.onmousemove=null
document.onmouseup=null
oDiv.releaseCapture && oDiv.releaseCapture()
startMove()
}
oDiv.setCapture && oDiv.setCapture()
return false
}
function startMove(){ //移动函数，主要操作是计算鼠标移动速度和移动方向。
clearInterval(timer)
timer=setInterval(function(){
iSpeedY+=3
var t=oDiv.offsetTop+iSpeedY
var l=oDiv.offsetLeft+iSpeedX
if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
t=document.documentElement.clientHeight-oDiv.offsetHeight
iSpeedY*=-0.8
iSpeedX*=0.8
}
if(t<0){
t=0
iSpeedY*=-0.8
iSpeedX*=0.8
}
if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
l=document.documentElement.clientWidth-oDiv.offsetWidth
iSpeedX*=-0.8
iSpeedY*=0.8
}
if(l<0){
l=0
iSpeedX*=-0.8
iSpeedY*=0.8
}
oDiv.style.left=l+'px'
oDiv.style.top=t+'px'
if(Math.abs(iSpeedX)<1)iSpeedX=0
if(Math.abs(iSpeedY)<1)iSpeedY=0
if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight){
clearInterval(timer)
}
document.title=i++
},30)
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
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()
