drag drop image js

1;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
2  dropArea.addEventListener(eventName, preventDefaults, false)
3})
4
5function preventDefaults (e) {
6  e.preventDefault()
7  e.stopPropagation()
8}
9

1// Code By Webdevtrick ( https://webdevtrick.com )
2var btn = document.querySelector('.add');
3var remove = document.querySelector('.draggable');
4 
5function dragStart(e) {
6  this.style.opacity = '0.4';
7  dragSrcEl = this;
8  e.dataTransfer.effectAllowed = 'move';
9  e.dataTransfer.setData('text/html', this.innerHTML);
10};
11 
12function dragEnter(e) {
13  this.classList.add('over');
14}
15 
16function dragLeave(e) {
17  e.stopPropagation();
18  this.classList.remove('over');
19}
20 
21function dragOver(e) {
22  e.preventDefault();
23  e.dataTransfer.dropEffect = 'move';
24  return false;
25}
26 
27function dragDrop(e) {
28  if (dragSrcEl != this) {
29    dragSrcEl.innerHTML = this.innerHTML;
30    this.innerHTML = e.dataTransfer.getData('text/html');
31  }
32  return false;
33}
34 
35function dragEnd(e) {
36  var listItens = document.querySelectorAll('.draggable');
37  [].forEach.call(listItens, function(item) {
38    item.classList.remove('over');
39  });
40  this.style.opacity = '1';
41}
42 
43function addEventsDragAndDrop(el) {
44  el.addEventListener('dragstart', dragStart, false);
45  el.addEventListener('dragenter', dragEnter, false);
46  el.addEventListener('dragover', dragOver, false);
47  el.addEventListener('dragleave', dragLeave, false);
48  el.addEventListener('drop', dragDrop, false);
49  el.addEventListener('dragend', dragEnd, false);
50}
51 
52var listItens = document.querySelectorAll('.draggable');
53[].forEach.call(listItens, function(item) {
54  addEventsDragAndDrop(item);
55});
56 
57function addNewItem() {
58  var newItem = document.querySelector('.input').value;
59  if (newItem != '') {
60    document.querySelector('.input').value = '';
61    var li = document.createElement('li');
62    var attr = document.createAttribute('draggable');
63    var ul = document.querySelector('ul');
64    li.className = 'draggable';
65    attr.value = 'true';
66    li.setAttributeNode(attr);
67    li.appendChild(document.createTextNode(newItem));
68    ul.appendChild(li);
69    addEventsDragAndDrop(li);
70  }
71}
72 
73btn.addEventListener('click', addNewItem);
74