DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
background: #448808;
height: 40px;
line-height: 40px;
color: #fff;
text-align: center;
border-radius: 8px;
}
li + li {
margin-top: 10px;
}
ul {
width: 80%;
margin: 20px auto;
}
.touch {
background: #222277;
}
style>
head>
<body>
<div>
<ul ondrag>
<li draggable="true">1li>
<li draggable="true">2li>
<li draggable="true">3li>
<li draggable="true">4li>
<li draggable="true">5li>
ul>
div>
<script>
class Filp {
constructor(ele, time = 500) {
this.animationEle = ele;
this.playStatus = 'init'
const { x: oldX, y: oldY } = this.getRect(this.animationEle);
setTimeout(() => {
var { x: newX, y: newY } = this.getRect(this.animationEle);
this.transformTo(this.animationEle, oldX - newX, oldY - newY, time);
this.onstart();
}, 0);
}
getRect(ele) {
return {
x: ele.offsetLeft,
y: ele.offsetTop,
};
}
raf(callback) {
requestAnimationFrame(() => {
requestAnimationFrame(callback);
});
}
transformTo(ele, offsetX, offsetY, time) {
ele.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
this.raf(() => {
ele.style.transition = `transform ${time}ms`;
ele.style.removeProperty("transform");
setTimeout(() => {
ele.style.transition = ``;
this.onend();
}, time);
}, 0);
}
onstart() {
this.playStatus = 'play'
this._onstart()
}
_onstart() {}
onend() {
this.playStatus = 'stop'
this._onend()
}
_onend() { }
addEventListener(type, callback) {
switch (type) {
case "onstart":
callback &&
(this._onstart = () => {
callback();
});
break;
case "onend":
callback &&
(this._onend = () => {
callback();
});
break;
}
}
}
var ul = document.querySelector("ul");
var dragEle = null;
ul.ondragstart = (e) => {
e.dataTransfer.effectAllowed = "move";
setTimeout(() => {
dragEle.classList.add("touch");
}, 0);
dragEle = e.target;
};
ul.ondragover = (e) => {
e.preventDefault();
};
ul.ondragenter = (e) => {
e.preventDefault();
var enterEle = e.target;
if (
enterEle != ul &&
enterEle != dragEle &&
!enterEle.classList.contains("moveing")
) {
const liList = [...ul.querySelectorAll("li")];
var dragEleIndex = liList.findIndex((ele) => ele == dragEle);
var enterEleIndex = liList.findIndex((ele) => ele == enterEle);
const filp = new Filp(enterEle, 150);
filp.addEventListener("onstart", () => {
console.log(filp.playStatus)
enterEle.classList.add("moveing");
});
filp.addEventListener("onend", () => {
console.log(filp.playStatus)
enterEle.classList.remove("moveing");
});
if (dragEleIndex > enterEleIndex) {
ul.insertBefore(dragEle, enterEle);
} else if (dragEleIndex < enterEleIndex) {
ul.insertBefore(dragEle, enterEle.nextElementSibling);
}
}
};
ul.ondragend = () => {
dragEle.classList.remove("touch");
dragEle = null;
};
script>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155