JSFiddle - React, Tailwind, and code Playground

by Sir_Pepe

HTML

<div class="dropzone">Hier hin</div>

<ul>
  <li draggable="true"><span class="handle"></span>HTML5</li>
  <li draggable="true"><span class="handle"></span>CSS3</li>
  <li draggable="true"><span class="handle"></span>XHTML 1</li>
  <li draggable="true"><span class="handle"></span>JavaScript</li>
</ul>

CSS

.dropzone {
  text-align: center;
  background: #EEE;
  border: 0.2em solid #000;
  padding: 3em;
  margin: 0.5em 0;
}

.dropzone.valid {
  background: #EFE;
  border: 0.2em solid #0F0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  background: #EEE;
  border: 0.2em solid #000;
  padding: 0.5em 0.5em 0.5em 1.2em;
  margin: 0.5em 0;
  position: relative;
}
li .handle {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0.5em;
  background: #999;
  border-right: 0.2em solid #000;
  cursor: move;
}

JavaScript

$('li').on('dragstart', function(evt){
  var evtX = evt.originalEvent.clientX;
  var evtY = evt.originalEvent.clientY;
  var $handle = $(evt.target).find('.handle');
  var handleOffset = $handle.offset();
  var handleWidth = $handle.width();
  var handleHeight = $handle.height();
  if(evtX >= handleOffset.left && evtX <= handleOffset.left + handleWidth &&
     evtY >= handleOffset.top && evtY <= handleOffset.top + handleHeight){
    evt.originalEvent.dataTransfer.setData('text', '');
  }
  else {
    evt.preventDefault();
  } 
});

$('.dropzone').on('dragenter', function(evt){
  evt.preventDefault();
});

$('.dropzone').on('dragover', function(evt){
  evt.preventDefault();
});

$('.dropzone').on('dragenter', function(){
  $(this).addClass('valid');
});

$('.dropzone').on('dragleave', function(){
  $(this).removeClass('valid');
});

$('.dropzone').on('drop', function(evt){
  evt.preventDefault();
  $(this).removeClass('valid');
  window.alert('Drop!');
});