原生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>