drag events example

by jshacker

HTML

<div id="page" droppable="true">
  <div id="element" draggable="true">I am an element.</div>
</div>

CSS

#page {
  width: 500px;
  height: 500px;
  border: thin solid #ddd;
}

#element {
  border: thin solid #ddd;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

JavaScript

var element = document.getElementById("element")
var page = document.getElementById("page")
element.addEventListener("dragstart", function (e) {
  console.log("drag started!")
})

element.addEventListener("dragend", function (e) {
  console.log("drag ended!")
})

element.addEventListener("click", function () {
  console.log("clicked")
})

page.addEventListener("drop", function (e) {
  console.log("drop!")
})