JavaScript Drag And Drop List

This JavaScript code snippet helps you set up drag and drop functionality for a list of items that have the class “draggable”. It uses HTML5 draggable attribute to enable the drag and drop list of items.

When an item is dragged, its opacity is reduced and its content is stored in the “dragSrcEl” variable. When the item is dropped, its content is swapped with the content of the item it was dropped on. The “addEventsDragAndDrop” function is used to add drag and drop event listeners to the “draggable” items. The “addNewItem” function is used to create a new “draggable” item and add it to the list when a button with the class “add” is clicked.

How to Create JavaScript Drag and Drop List

First of all, load the Font Awesome CSS (for icons) by adding the following CDN link into the head tag of your HTML document. (Optional)

  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

After that, create the HTML structure for drag and drop list as follows:

<div class="container">
  <h1>DRAG AND DROP HTML5</h1>
  <div class="adder">
    <input type="text" class="input" placeholder="Add items in your list"/>
    <span class="add">+</span>
  </div>
  <ul>
    <li class="draggable" draggable="true">JavaScript</li>
    <li class="draggable" draggable="true">SCSS</li>
    <li class="draggable" draggable="true">HTML5</li>
    <li class="draggable" draggable="true">Awesome DnD</li>
    <li class="draggable" draggable="true">Follow me</li>
  </ul>
</div>

Style your list using the following CSS styles. You can change CSS rules in order to customize your list.

@import url("https://fonts.googleapis.com/css?family=Raleway:300,800");
body {
  background-color: #0072ff;
}
h1 {
  text-align: center;
  font-family: "Raleway", sans-serif;
  color: white;
  font-size: 50px;
  font-weight: normal;
}
.adder {
  position: relative;
  width: 250px;
  margin: 0px auto;
  display: block;
}
.cd__main{
display: block !important;
}
 .adder ::-webkit-input-placeholder {
  color: #cecece;
}
.container{
width: 100%;
height: 100%;
background-color: blue;
padding: 20px;
}
body .adder .input {
  outline: none;
  border: 1px solid white;
  background-color: #0072ff;
  color: white;
  height: 50px;
  width: 250px;
  padding-left: 10px;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: 16px;
  margin-left: -5px;
}
body .adder span {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.8;
  cursor: pointer;
  transition: all 200ms;
  color: white;
  will-change: transform;
}
body .adder span:hover {
  transform: rotate(180deg);
}
body ul {
  padding: 0px;
}
body ul .draggable {
  will-change: transform;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  height: 50px;
  list-style-type: none;
  margin: 10px;
  background-color: white;
  color: #0072ff;
  width: 250px;
  line-height: 3.2;
  padding-left: 10px;
  cursor: move;
  transition: all 200ms;
  user-select: none;
  margin: 10px auto;
  position: relative;
}
body ul .draggable:after {
  content: "drag me";
  right: 7px;
  font-size: 10px;
  position: absolute;
  cursor: pointer;
  line-height: 5;
  transition: all 200ms;
  transition-timing-function: cubic-bezier(0.48, 0.72, 0.62, 1.5);
  transform: translateX(120%);
  opacity: 0;
}
body ul .draggable:hover:after {
  opacity: 1;
  transform: translate(0);
}

.over {
  transform: scale(1.1, 1.1);
}

Finally, add the following JavaScript function to activate the drag and drop functionality.

var btn = document.querySelector('.add');
var remove = document.querySelector('.draggable');

function dragStart(e) {
  this.style.opacity = '0.4';
  dragSrcEl = this;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
};

function dragEnter(e) {
  this.classList.add('over');
}

function dragLeave(e) {
  e.stopPropagation();
  this.classList.remove('over');
}

function dragOver(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  return false;
}

function dragDrop(e) {
  if (dragSrcEl != this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }
  return false;
}

function dragEnd(e) {
  var listItens = document.querySelectorAll('.draggable');
  [].forEach.call(listItens, function(item) {
    item.classList.remove('over');
  });
  this.style.opacity = '1';
}

function addEventsDragAndDrop(el) {
  el.addEventListener('dragstart', dragStart, false);
  el.addEventListener('dragenter', dragEnter, false);
  el.addEventListener('dragover', dragOver, false);
  el.addEventListener('dragleave', dragLeave, false);
  el.addEventListener('drop', dragDrop, false);
  el.addEventListener('dragend', dragEnd, false);
}

var listItens = document.querySelectorAll('.draggable');
[].forEach.call(listItens, function(item) {
  addEventsDragAndDrop(item);
});

function addNewItem() {
  var newItem = document.querySelector('.input').value;
  if (newItem != '') {
    document.querySelector('.input').value = '';
    var li = document.createElement('li');
    var attr = document.createAttribute('draggable');
    var ul = document.querySelector('ul');
    li.className = 'draggable';
    attr.value = 'true';
    li.setAttributeNode(attr);
    li.appendChild(document.createTextNode(newItem));
    ul.appendChild(li);
    addEventsDragAndDrop(li);
  }
}

btn.addEventListener('click', addNewItem);

That’s all! hopefully, you have successfully created JavaScript drag and drop list. If you have any questions or suggestions, feel free to comment below.