如何在其他元素之前插入元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在其他元素之前插入元素相关的知识,希望对你有一定的参考价值。

我正在尝试获得一个带有可拖动元素的列表,你可以重新排序。

我似乎无法让我拖动的元素插入到文档中。

下面是我目前所得到的代码库...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();
}

任何帮助将是感激的,谢谢

答案
  • 'beforeend'将插入被拖动的元素。里面 在目标元素的最后一个子元素之后,你应该使用'afterend'来代替。
  • 没有必要去掉被拖动的元素,所以去掉了 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>

以上是关于如何在其他元素之前插入元素的主要内容,如果未能解决你的问题,请参考以下文章

java - 如何在java中的某个元素之后/之前将元素插入xml

如何在 Chrome 的检查器中添加/插入之前或之后的伪元素?

如何在 unordered_map 中插入 3 个元素或其他奇数个元素?

jquery怎么在一个元素之前插入元素

如何在 XAML 代码中创建支持其中其他元素的 UserControl

jquery如何动态的添加一条html代码