我正在尝试获得一个带有可拖动元素的列表,你可以重新排序。
我似乎无法让我拖动的元素插入到文档中。
下面是我目前所得到的代码库...https:/codepen.iohichihachipenzYvNYZq
<ul>
<li class="card" draggable=true>1</li>
<li class="card" draggable=true>2</li>
<li class="card" draggable=true>3</li>
<li class="card" draggable=true>4</li>
</ul>
const list = document.querySelectorAll(".card");
let dragged;
list.forEach(e => {
e.addEventListener("dragstart", dragStart);
e.addEventListener("dragend", dragEnd);
e.addEventListener("dragover", dragOver);
e.addEventListener("dragenter", dragEnter);
e.addEventListener("dragleave", dragLeave);
e.addEventListener("drop", dragDrop);
})
function dragStart(){
this.className += " hold";
setTimeout(()=>{
this.className= "invisible";
},0);
dragged = this;
}
function dragEnd(){
this.className="card";
}
function dragOver(e){
e.preventDefault();
}
function dragEnter(e){
e.preventDefault();
this.className += " hovered";
}
function dragLeave(){
this.className = "card";
}
function dragDrop(e){
this.className = "card";
insert(e, this);
}
function insert(e, el){
const mY = event.clientY;
const elY = el.offsetTop + el.offsetHeight /2;
const el2 = dragged;
console.log(mY, elY);
if(mY<elY){
console.log(el2, "insertBefore", el);
el.insertAdjacentElement("beforebegin", el2);
}else{
console.log(el2, "insertAfter", el);
el.insertAdjacentElement("beforeend", el2);
}
dragged.remove();
}
任何帮助将是感激的,谢谢
dragged.remove();
到头来 insert
功能const list = document.querySelectorAll(".card");
let dragged;
list.forEach(e => {
e.addEventListener("dragstart", dragStart);
e.addEventListener("dragend", dragEnd);
e.addEventListener("dragover", dragOver);
e.addEventListener("dragenter", dragEnter);
e.addEventListener("dragleave", dragLeave);
e.addEventListener("drop", dragDrop);
})
function dragStart(){
this.className += " hold";
setTimeout(()=>{
this.className= "invisible";
},0);
dragged = this;
}
function dragEnd(){
this.className="card";
}
function dragOver(e){
e.preventDefault();
}
function dragEnter(e){
e.preventDefault();
this.className += " hovered";
}
function dragLeave(){
this.className = "card";
}
function dragDrop(e){
this.className = "card";
insert(e, this);
}
function insert(e, el){
const mY = event.clientY;
const elY = el.offsetTop + el.offsetHeight /2;
const el2 = dragged;
if (mY < elY){
el.insertAdjacentElement("beforebegin", el2);
}else{
el.insertAdjacentElement("afterend", el2);
}
}
li {
list-style-type: none;
width: 200px;
border: 1px solid black;
}
<ul>
<li class="card" draggable=true>1</li>
<li class="card" draggable=true>2</li>
<li class="card" draggable=true>3</li>
<li class="card" draggable=true>4</li>
</ul>