Drag and drop HTML5 element and javascript issue

Question

I have a list:

<ol class="list" id="drag-list">
    <li data-itemid="01" draggable="true">
        <span class="dragger"></span>
        <span>01 - Lorem ipsum dolor sit amet.</span>
    </li>
    <li data-itemid="02" draggable="true">
        <span class="dragger"></span>
        <span>02 - Lorem ipsum dolor.</span>
    </li>
    <li data-itemid="03" draggable="true">
        <span class="dragger"></span>
        <span>03 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
    </li>
    <li data-itemid="04" draggable="true">
        <span class="dragger"></span>
        <span>04 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aliquam dolore totam, labore, voluptate delectus?</span>
    </li>
    <li data-itemid="05" draggable="true">
        <span class="dragger"></span>
        <span>05 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, soluta.</span>
    </li>
</ol>

Now I need to reorder the LI's members using the HTML5 drag 'n drop.

My issue is that releasing in the new position never happens. I even tried to use this example but it did not work for me:

https://html.spec.whatwg.org/multipage/dnd.html#event-drag

Here I leave you a jsfiddle with my full working (and wrong) code. May you help me please.

https://jsfiddle.net/junihh/vrg7oj2w/

Alvarez Alvarez · Accepted Answer · 2017-12-27T16:00:06

you can try this

var dragSrcEl = null;

function handleDragStart(e) {
  // Target (this) element is the source node.
  dragSrcEl = this;

  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.outerHTML);

  this.classList.add('dragElem');
}
function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }
  this.classList.add('over');

  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

  return false;
}

function handleDragEnter(e) {
  // this / e.target is the current hover target.
}

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

function handleDrop(e) {

  if (e.stopPropagation) {
    e.stopPropagation(); 
  }


  if (dragSrcEl != this) {
    this.parentNode.removeChild(dragSrcEl);
    var dropHTML = e.dataTransfer.getData('text/html');
    this.insertAdjacentHTML('beforebegin',dropHTML);
    var dropElem = this.previousSibling;
    addDnDHandlers(dropElem);
    
  }
  this.classList.remove('over');
  return false;
}

function handleDragEnd(e) {
  this.classList.remove('over');


}

function addDnDHandlers(elem) {
  elem.addEventListener('dragstart', handleDragStart, false);
  elem.addEventListener('dragenter', handleDragEnter, false)
  elem.addEventListener('dragover', handleDragOver, false);
  elem.addEventListener('dragleave', handleDragLeave, false);
  elem.addEventListener('drop', handleDrop, false);
  elem.addEventListener('dragend', handleDragEnd, false);

}

var cols = document.querySelectorAll('#drag-list li');
[].forEach.call(cols, addDnDHandlers);

* {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    list-style: none;
    outline: 0;
}

html {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    font: normal 18px/100% Helvetica,Arial,sans-serif;
    color: #666;
}

.transitions, a, .page {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

a {
    color: #000;
    text-decoration: underline;
}
a:hover { text-decoration: none; }

.page {
    max-width: 750px;
    min-width: 230px;
    margin: 25px auto;
    padding: 0 25px;
}

.list li {
    position: relative;
    overflow: hidden;
    margin-bottom: 5px;
    border: 1px solid #DDD;
    cursor: move; //effect drag and drop
}
.list span {
    display: block;
}
.list span:nth-child(1) {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 25px;
    background-color: #EEE;
}
.list span:nth-child(2) {
    padding: 10px 10px 10px 40px;
    line-height: 120%;
}

<ol class="list" id="drag-list">
    <li  draggable="true">
        <span class="dragger"></span>
        <span>01 - Lorem ipsum dolor sit amet.</span>
    </li>
    <li  draggable="true">
        <span class="dragger"></span>
        <span>02 - Lorem ipsum dolor.</span>
    </li>
    <li  draggable="true">
        <span class="dragger"></span>
        <span>03 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
    </li>
    <li  draggable="true">
        <span class="dragger"></span>
        <span>04 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aliquam dolore totam, labore, voluptate delectus?</span>
    </li>
    <li draggable="true">
        <span class="dragger"></span>
        <span>05 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, soluta.</span>
    </li>
</ol>

Drag and drop HTML5 element and javascript issue

2 Answers