HTML5 Drag and & Drop - Moving Elements Within a List

Question

I am trying out HTML5 Drag and Drop Web API and trying to incorporate it into a simple To-Do App project. I have partially implemented my intended functionality, whereby I swap around the dragged list item with the list item where it is dropped.

However, I have a bug at the moment where if the user drags a list item into any <span> or a <button>, it places the dragged data as a child of these elements?

HTML:

<ul id="list-items">
    <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">
        <span>Jack</span>
        <button>Edit</button>
        <button>Remove</button>
    </li>
    <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)">
        <span>Josh</span>
        <button>Edit</button>
        <button>Remove</button>
    </li>
</ul>

JavaScript:

let source;

function dragStarted(e) {
source = e.target;
  e.dataTransfer.setData("text/plain", e.target.innerHTML);
  e.dataTransfer.effectAllowed = "move";
}

function draggingOver(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = "move";
}

function dropped(e) {
  e.preventDefault();
  e.stopPropagation();
  source.innerHTML = e.target.innerHTML;
  e.target.innerHTML = e.dataTransfer.getData("text/plain");
}

Why is this happening and how can I fix this?

View full codepen here: https://codepen.io/jamesbarrett95/pen/LWqQoB

Thanks, James.

Answer 1 · 2017-04-02T17:19:38Z

April 2, 2017 5:19pm

Hi, James.

A simple way to prevent it is by using a conditional on the 'dropped' function to check if the element is a list. Next step to make your solution better would be to find the closest 'li' element if the user tries to drop it on the button or span and move the dragged element into the closest list.

function dropped(e) {
    e.preventDefault();
    e.stopPropagation();

    if (e.target.localName === 'li') {
        source.innerHTML = e.target.innerHTML;
        e.target.innerHTML = e.dataTransfer.getData("text/plain");
    }
}

Good luck :)

Welcome to the Treehouse Community

Looking to learn something new?

James Barrett

James Barrett

HTML5 Drag and & Drop - Moving Elements Within a List

1 Answer

Rune Andreas Nielsen

Rune Andreas Nielsen

James Barrett

James Barrett