117 lines
4.8 KiB
HTML
117 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
|
<style type="text/css">
|
|
.sortlist>div {
|
|
background: #67a5da;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.sortlist .dragging {
|
|
background: #a2cff6;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
用简化的原始代码，实现拖动排序，方便研究实现原理。<br/>
|
|
实现了一个通用排序方案和数据库更新机制。<br/>
|
|
<div class="sortlist">
|
|
<div draggable="true" data-id="1" data-sort="100">第1行</div>
|
|
<div draggable="true" data-id="2" data-sort="200">第2行</div>
|
|
<div draggable="true" data-id="3" data-sort="300">第3行</div>
|
|
<div draggable="true" data-id="4" data-sort="400">第4行</div>
|
|
<div draggable="true" data-id="5" data-sort="500">第5行</div>
|
|
<div draggable="true" data-id="6" data-sort="600">第6行</div>
|
|
<div draggable="true" data-id="7" data-sort="700">第7行</div>
|
|
<div draggable="true" data-id="8" data-sort="800">第8行</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
'use strict';
|
|
var dom_sortlist = document.querySelector('.sortlist');
|
|
var dom_sourceDrag = null;
|
|
dom_sortlist.ondragstart = function (event) {
|
|
setTimeout(() => {
|
|
event.target.classList.add('dragging');
|
|
}, 0);
|
|
dom_sourceDrag = event.target;
|
|
event.dataTransfer.effectAllowed = 'move'
|
|
};
|
|
dom_sortlist.ondragenter = function (event) {
|
|
//var ani = new ciyanidom(dom_sortlist.children, 'data-id', '0.5s'); //记录排序前位置
|
|
event.preventDefault();
|
|
if (event.target === dom_sortlist || event.target === dom_sourceDrag)
|
|
return;
|
|
var child = [...dom_sortlist.children];
|
|
var sidx = child.indexOf(dom_sourceDrag);
|
|
var tidx = child.indexOf(event.target);
|
|
if (sidx < tidx) {
|
|
console.log('向下');
|
|
dom_sortlist.insertBefore(dom_sourceDrag, event.target.nextElementSibling);
|
|
} else {
|
|
console.log('向上');
|
|
dom_sortlist.insertBefore(dom_sourceDrag, event.target);
|
|
}
|
|
//ani.animate();//位置变化后，播放动画
|
|
};
|
|
dom_sortlist.ondragover = function (event) {
|
|
event.preventDefault();
|
|
};
|
|
dom_sortlist.ondragend = function (event) {
|
|
event.target.classList.remove('dragging');
|
|
//通用排序方案
|
|
var me = {
|
|
id: dom_sourceDrag.getAttribute('data-id'),
|
|
sort: parseInt(dom_sourceDrag.getAttribute('data-sort'))
|
|
};
|
|
var meprev = null;
|
|
if (dom_sourceDrag.previousElementSibling) {
|
|
meprev = {
|
|
id: dom_sourceDrag.previousElementSibling.getAttribute('data-id'),
|
|
sort: parseInt(dom_sourceDrag.previousElementSibling.getAttribute('data-sort'))
|
|
}
|
|
}
|
|
var menext = null;
|
|
if (dom_sourceDrag.nextElementSibling) {
|
|
menext = {
|
|
id: dom_sourceDrag.nextElementSibling.getAttribute('data-id'),
|
|
sort: parseInt(dom_sourceDrag.nextElementSibling.getAttribute('data-sort'))
|
|
}
|
|
}
|
|
var odgap = 100;
|
|
var updates = [];
|
|
if (meprev && menext) {
|
|
var odr = menext.sort - meprev.sort;
|
|
if (odr > 1) {
|
|
var od = meprev.sort + parseInt(odr / 2);
|
|
console.log(menext.sort, meprev.sort, od);
|
|
updates.push({ id: me.id, sort: od });
|
|
dom_sourceDrag.setAttribute('data-sort', od);
|
|
} else {
|
|
var od = odgap;
|
|
for (var i = 0; i < dom_sortlist.children.length; i++) {
|
|
var item = dom_sortlist.children[i];
|
|
updates.push({ id: item.getAttribute('data-id'), sort: od });
|
|
item.setAttribute('data-sort', od);
|
|
od += odgap;
|
|
}
|
|
}
|
|
} else if (meprev) {
|
|
updates.push({ id: me.id, sort: meprev.sort + odgap });
|
|
dom_sourceDrag.setAttribute('data-sort', meprev.sort + odgap);
|
|
} else if (menext) {
|
|
updates.push({ id: me.id, sort: menext.sort - odgap });
|
|
dom_sourceDrag.setAttribute('data-sort', menext.sort - odgap);
|
|
}
|
|
//排序后，更新数据库
|
|
console.log(updates);
|
|
};
|
|
</script>
|
|
</body>
|
|
|
|
</html> |