edDrag

by Edgar Martinez

HTML

<div class="example-parent">
  <h1>To-do list</h1>
  <div class="example-origin">
    To-do
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"

    >
      thing 1
    </div>
    <div
      id="draggable-2"
      class="example-draggable"
      draggable="true"

    >
      thing 2
    </div>
    <div
      id="draggable-3"
      class="example-draggable"
      draggable="true"

    >
      thing 3
    </div>
    <div
      id="draggable-4"
      class="example-draggable"
      draggable="true"

    >
      thing 4
    </div>
  </div>

</div>

CSS

.example-parent {
  border: 2px solid #DFA612;
  color: black;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
}

.example-origin {
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

.example-draggable {
  background-color: #4AAE9B;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
}

.example-dropzone {
  background-color: #6DB65B;
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

JavaScript

let dragged;
var element=this;
// Plugin code would go here...
var isMouseDown = false;
// initial mouse X and Y for `mousedown`
	$("[draggable=true]").css({
		'background-color':"red"
	});
var mouseX;
var mouseY;
// element X and Y before and after move
var elementX = parseInt($("[draggable=true]").css('left'));
var elementY = parseInt($("[draggable=true]").css('top'));
/* events fired on the draggable target */
document.addEventListener("drag", event => {
  //console.log("dragging");
	var deltaX = event.clientX - mouseX;
	var deltaY = event.clientY - mouseY;
	$("[draggable=true]").css({
		left:elementX + deltaX + 'px',
		top: elementY + deltaY + 'px'
	});
});

document.addEventListener("dragstart", event => {
//console.log("dragging start");
	mouseX = event.clientX;
	mouseY = event.clientY;
	isMouseDown = true;
});
document.addEventListener("dragend", event => {
//console.log("dragging stop");
	isMouseDown = false;
	elementX = parseInt($("[draggable=true]").css('left'));
	elementY = parseInt($("[draggable=true]").css('top'));
});



/* events fired on the drop targets */
document.addEventListener("dragover", event => {
  // prevent default to allow drop
  event.preventDefault();
}, false);

document.addEventListener("dragenter", event => {
  // highlight potential drop target when the draggable element enters it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

document.addEventListener("dragleave", event => {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});


document.addEventListener("drop", event => {
  // prevent default action (open as link for some elements)
  event.preventDefault();
  // move dragged element to the selected drop target
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
   ...