自動排序

HelloWord · 发表于 2017-8-31 17:59:27

本帖最后由 HelloWord 于 2017-8-31 18:01 编辑

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<meta id="meta-viewport" name="viewport" content="width=device-width">
<style type="text/css">
.sortable {
border: solid 1px #ddd;
padding: 20px 30px;
margin: 100px;
}
.sortable .item {
width: 210px;
border: solid 1px #ccc;
line-height: 30px;
padding-left: 10px;
cursor: move;
transition: all .2s ease;
}
.sortable .item strong {
color: #333;
-webkit-user-select: none;
}
</style>
</head>
<body>
<div class="sortable" id="sortable">
<div class="item">
<strong>吸血恶魔兽</strong>
</div>
<div class="item">
<strong>超究极魔兽</strong>
</div>
<div class="item">
<strong>恶魔兽</strong>
</div>
<div class="item">
<strong>小丑皇兽</strong>
</div>
<div class="item">
<strong>小恶魔兽</strong>
</div>
<div class="item">
<strong>究极恶魔兽</strong>
</div>
</div>
<script>
var itemArr = document.getElementsByClassName('item');
for(var i = 0; i < itemArr.length; i++) {
itemArr[i].setAttribute('draggable', 'true');
itemArr[i].dataset.order = i;
}
var targetY = 0;
var itemHeight = itemArr[0].innerHeight;
var nowItem = "";
var targetItem = "";
//拖拽开始
document.addEventListener('dragstart', function(event) {
event.target.style.opacity = "0.4";
nowItem = event.target.dataset.order;
}, false)
//拖拽中
document.addEventListener('drag', function(event) {
if(event.pageY >= targetY ) {
document.getElementById('sortable').insertBefore(event.target, targetItem.nextSibling);
}else{
document.getElementById('sortable').insertBefore(event.target, targetItem);
}
}, false)
//拖拽结束
document.addEventListener('dragend', function(event) {
event.target.style.opacity = "1";
for(var i = 0; i < itemArr.length; i++) {
itemArr[i].dataset.order = i;
}
}, false)
//拖拽到目标
document.addEventListener("dragenter", function(event) {
if(event.target.className == "item" ) {
console.log('目标：' + event.pageY);
targetY = event.pageY;
targetItem = event.target;
} else {
console.log("不是拖动目标");
}
});
</script>
</body>
</html>

复制代码

残酷 · 发表于 2017-8-31 19:49:21

原生JS好久没用过了

HelloWord · 发表于 2017-9-1 15:17:19

残酷发表于 2017-8-31 19:49
原生JS好久没用过了

{:1_165:}我叫淡漠本名还记得？

398681207 · 发表于 2017-9-1 22:37:13

这代码是用来排列什么的？

残酷 · 发表于 2017-9-2 00:02:51

398681207 发表于 2017-9-1 22:37
这代码是用来排列什么的？

也不是自动排序，核心代码是insertBefore，可以在元素中插入一个元素。
所谓的排序应该就是那段循环代码吧，自定义了一个下标属性，来记录每个元素的下标，我的理解就是这样，代码没仔细看，粗略看了一下，原生很久没用了

398681207 · 发表于 2017-9-2 21:55:16

残酷发表于 2017-9-2 00:02
也不是自动排序，核心代码是insertBefore，可以在元素中插入一个元素。
所谓的排序应该就是那段循环代码 ...

不明觉厉，支持一下先

紫霞吖 · 发表于 2017-9-3 14:53:36

看不懂

ohjfe · 发表于 2019-4-26 13:50:44

创意哦！楼主高人啊谢

外贸公司实习报告

[源码] 自動排序

≌萌新≌

☆大佬☆