自動排序
本帖最后由 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.setAttribute('draggable', 'true');
itemArr.dataset.order = i;
}
var targetY = 0;
var itemHeight = itemArr.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.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>
原生JS好久没用过了 残酷 发表于 2017-8-31 19:49
原生JS好久没用过了
{:1_165:}我叫淡漠 本名还记得? 这代码是用来排列什么的?
398681207 发表于 2017-9-1 22:37
这代码是用来排列什么的?
也不是自动排序,核心代码是insertBefore,可以在元素中插入一个元素。
所谓的排序应该就是那段循环代码吧,自定义了一个下标属性,来记录每个元素的下标,我的理解就是这样,代码没仔细看,粗略看了一下,原生很久没用了 残酷 发表于 2017-9-2 00:02
也不是自动排序,核心代码是insertBefore,可以在元素中插入一个元素。
所谓的排序应该就是那段循环代码 ...
不明觉厉,支持一下先 看不懂 创意哦!楼主高人啊 谢
static/image/common/sigline.gif
外贸公司实习报告
页:
[1]