CODEWITHSUNDEEP
javascript
HichiHachi
HichiHachi

Reputation: 491

How to insert element before another element

Im playing about with trying to get a list with draggable elements that you can reorder.

I can't seem to get the element Ive dragged to insert into the document.

Here's a codepen of what I've got so far... https://codepen.io/hichihachi/pen/zYvNYZq

<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();
}

Any help would be appreciated thanks!

Upvotes: 1

Views: 226

Answers (1)

Kirill Simonov
Kirill Simonov

Reputation: 8491

  • 'beforeend' will insert the dragged element inside the target element, after its last child, you should use 'afterend` instead
  • there's no need to remove the dragged element, so get rid of dragged.remove(); at the end of the insert function

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>

Upvotes: 1

Related Questions