https://www.w3schools.com/tags/tag_li.asp
Default CSS Settings Most browsers will display the
element with the following default values:
li {
display: list-item;
}https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/picture
-
-
Save xgqfrms-GitHub/e3915ad946c6008e6a0d4d7335ae3112 to your computer and use it in GitHub Desktop.
HTML <li> Tag
https://www.redips.net/javascript/drag-and-drop-table-content/
Node.replaceChild()
replacedNode = parentNode.replaceChild(newChild, oldChild);
https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild
https://stackoverflow.com/questions/8837191/sort-an-html-list-with-javascript
http://jsfiddle.net/Paulpro/x92hn/2/
https://github.com/RubaXa/Sortable#usage
http://jsbin.com/qumuwe/edit?html,js,output
// <script src="./libs/Sortable.min.js"></script>
let sortable_container = document.querySelector(`#section-sortable-container`);
let sortable = Sortable.create(sortable_container);
native JS sort div !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>drag demo</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#app {
position: relative;
width: 100%;
height: 100%;
max-width: 980px;
margin: auto;
}
.list {
padding: 10px;
height: 20px;
border-bottom: 1px solid #ddd;
}
#recycle {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
line-height: 70px;
text-align: center;
background: #ddd;
}
</style>
</head>
<body>
<div id="app">
<div class="main">
<div class="list" draggable="true">a这里是列表1的标题</div>
<div class="list" draggable="true">b这里是列表2的标题</div>
<div class="list" draggable="true">c这里是列表3的标题</div>
<div class="list" draggable="true">d这里是列表4的标题</div>
<div class="list" draggable="true">e这里是列表5的标题</div>
<div class="list" draggable="true">f这里是列表6的标题</div>
<div class="list" draggable="true">g这里是列表7的标题</div>
</div>
<div id="recycle">回收站</div>
</div>
<script src="./sortable.js"></script>
<!-- <script src="http://timruffles.github.io/ios-html5-drag-drop-shim/ios-drag-drop.js"></script> -->
</body>
</html>js
// shim ???
var iosDragDropShim = {
enableEnterLeave: true
};
// 兼容移动端
var source = document.querySelectorAll('.list'),
recycle = document.getElementById('recycle'),
dragElement = null,
// 用于存放拖动元素
lock = true;
// 最后元素拖放拖放时会进入enter和leave的循环，用来锁住
for(var i = 0; i < source.length; i++){
source[i].addEventListener('dragstart',function(ev){
dragElement = this;
// 用于存放拖动元素
this.style.backgroundColor = '#f8f8f8';
// 设置拖动元素的背景
},false);
source[i].addEventListener('dragend',function(ev){
ev.target.style.backgroundColor = '#fff';
// 拖放结束还原拖动元素的背景
ev.preventDefault();
},false)
source[i].addEventListener('dragenter', function(ev){
if(dragElement != this){
this.parentNode.insertBefore(dragElement,this);
// 把拖动元素添加到当前元素的前面
}
}, false)
source[i].addEventListener('dragleave', function(ev){
console.log(111);
if(dragElement != this){
if(lock && (this == this.parentNode.lastElementChild || this == this.parentNode.lastChild)){
// 当前元素时最后一个元素
this.parentNode.appendChild(dragElement);
// 把拖动元素添加最后面
lock = false;
}else{
lock = true;
}
}
}, false)
};
/* recycle ondrop */
recycle.addEventListener('drop', function(ev){
// 拖进回收站则删除该元素
dragElement.parentNode.removeChild(dragElement);
// parentNode.removeChild
}, false)
document.ondragover = function(e){
// 必须设置dragover阻止默认事件
e.preventDefault();
}
document.ondrop = function(e){
e.preventDefault();
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://cdn.xgqfrms.xyz/Sortable/sortable.min.js