原生js实现H5拖拽功能排序，借助jq实现点击效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>easyUI 拖动效果</title>
<script type="text/javascript" ></script>
<script type="text/javascript" src="jQuery3.4.js"></script>
<style type="text/css">
ul{
padding: 0px;
margin: 0px;
}
li{
padding: 0px;
margin: 0px;
}
.columns{
width: 300px;
height: 600px;
border: 1px solid #95b8e7;
}
.column{
width: auto;
height:30px;
padding: 2px 4px;
line-height: 30px;
position: relative;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.column-selected{
background-color: #e7f4ff;
}
</style>
</head>
<body>
<ul id="columns" class="columns">
<li value="AL" class="column column-selected" id="A">数学课</li>
<li value="AK" class="column" id="B">语文课</li>
<li value="AZ" class="column" id="C">英语课</li>
<li value="AR" class="column" id="E">体育课</li>
<li value="CA" class="column" id="F">专业课</li>
<li value="CO" class="column" id="G">美术课</li>
<li class="column"></li>
</ul>
</body>
<script type="text/javascript">
$(function () {
// 给所有的子类添加点击事件，点击时添加点击效果，并移除别的效果
$('#columns .column').bind('click',function (i) {
$(this).addClass('column-selected').siblings().removeClass('column-selected')
})
})
function sortable(rootEl, onUpdate) {
var dragEl;
// rootEl.children
// 将所有的子类元素设置为可拖动的 draggable = true
[].slice.call(rootEl.children).forEach(function (itemEl) {
itemEl.draggable = true;
});
// 该函数负责进行排序
function _onDragOver(evt) {
evt.preventDefault();
evt.dataTransfer.dropEffect = 'move';
var target = evt.target;
if (target && target !== dragEl && target.nodeName == 'LI') {
// Sorting
rootEl.insertBefore(dragEl, target||target.nextSibling );
}
}
// 排序结束后的钩子函数
function _onDragEnd(evt){
evt.preventDefault();
dragEl.classList.remove('ghost');
rootEl.removeEventListener('dragover', _onDragOver, false);
rootEl.removeEventListener('dragend', _onDragEnd, false);
// 拖动结束的时候，保留一份当前数据的id的排序，如果需要保存到后台，
let arr = []
$('#columns .column').each(function (col) {
if(col == $('#columns .column').length-1){
return
}
arr.push($(this).attr('id'))
})
onUpdate(arr);
}
// 开始排序 监听父元素的dragstart 事件
rootEl.addEventListener('dragstart', function (evt){
// 保存当前被拖动的子元素
dragEl = evt.target;
// $(this).addClass('column-selected').siblings().removeClass('column-selected')
// 设置移动的类型
evt.dataTransfer.effectAllowed = 'move';
// 设置要移动的数据
evt.dataTransfer.setData('Text', dragEl.textContent);
// 监听元素的dragover dragend 事件
rootEl.addEventListener('dragover', _onDragOver, false);
rootEl.addEventListener('dragend', _onDragEnd, false);
//这里如果不添加setTimeout拖出去的元素也会添加上该类名
setTimeout(function () {
dragEl.classList.add('ghost');
}, 0)
}, false);
}
// Using 调用的时候传入要控制的元素的最顶层，和回调函数
sortable(document.getElementById('columns'), function (item) {
console.log('拖动的组件：')
console.log(item);
});
</script>
</html>