Draggable List Elements

In this example below you will see how to do a Draggable List Elements with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by bscherer, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bscherer ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Draggable List Elements</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <ul class="draggable-list" data-draggable="draggable">
  <li draggable="true">Eins</li>
  <li draggable="true">Zwei</li>
  <li draggable="true">Drei</li>
  <li draggable="true">Vier</li>
  <li draggable="true">F├╝nf</li>
</ul>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/bscherer/draggable-list-elements-RorrOR */
/* =================================== *\
  CSS
\* =================================== */
html, body {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  color: #666;
}

ul {
  width: 400px;
  margin: 10vh auto;
  padding: 0;
  position: relative;
  list-style-type: none;
}
ul li {
  position: relative;
  width: 100%;
  height: 40px;
  margin: 0 0 2px 0;
  padding: 0 15px;
  -webkit-transition: all 0.1s linear 0.1s;
  transition: all 0.1s linear 0.1s;
  -moz-transition: all 0.1s linear 0.1s;
  -o-transition: all 0.1s linear 0.1s;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  background: #eee;
  border: 2px solid #ccc;
  counter-increment: section;
}
ul li:before {
  margin: 0 15px 0 0;
  content: counter(section);
}
ul li.over {
  transform: scale(0.95);
  border-style: dashed;
  color: transparent;
  background-color: #eee;
}
ul li.over:after {
  content: '';
  background: transparent;
}
ul li:after {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  content: '\f05b';
  font-family: FontAwesome;
  line-height: 1;
  font-size: inherit;
  font-weight: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-transition: all 0.1s linear 0.1s;
  transition: all 0.1s linear 0.1s;
  -moz-transition: all 0.1s linear 0.1s;
  -o-transition: all 0.1s linear 0.1s;
  background: #ccc;
  color: #222;
  text-align: center;
  cursor: move;
}

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}


/*Downloaded from https://www.codeseek.co/bscherer/draggable-list-elements-RorrOR */
// https://www.html5rocks.com/de/tutorials/dnd/basics/#toc-references
var dragSrcEl = null;

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

function handleDragOver(e) {
  if (e.preventDefault) { e.preventDefault(); }
  e.dataTransfer.dropEffect = 'move';  

  return false;
}

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

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

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

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

  return false;
}

function handleDragEnd(e) {
  [].forEach.call(cols, function (col) {
    col.classList.remove('over');
  });
}

var cols = $('[data-draggable]').children();
[].forEach.call(cols, function(col) {
  col.addEventListener('dragstart', handleDragStart, false);
  col.addEventListener('dragenter', handleDragEnter, false)
  col.addEventListener('dragover', handleDragOver, false);
  col.addEventListener('dragleave', handleDragLeave, false);
  col.addEventListener('drop', handleDrop, false);
  col.addEventListener('dragend', handleDragEnd, false);
});

Comments