Drag and Drop Experiments

This is some introductory text.

• The heading is draggable.
• The introductory text is also draggable because we use setAttribute("draggable","true") in JavaScript.
• The list below is also draggable because we use setAttribute("draggable","true") in JavaScript.
  • This is a little trickier because we have to iterate over the HTML collection (listitems) to do that.
  • We had to limit the list that was draggable with: document.querySelectorAll(".fruit > li")

Drag the fruit into the empty box.

Drop Items Below