JSFiddle - React, Tailwind, and code Playground

by Sir_Pepe

HTML

<div data-accept="markup" id="Markup" class="dropzone">Markup</div>
<div data-accept="style" id="Style" class="dropzone">Style</div>

<ul>
  <li data-type="markup" draggable="true">HTML5</li>
  <li data-type="style" draggable="true">CSS3</li>
  <li data-type="markup" draggable="true">XHTML 1</li>
  <li data-type="script" draggable="true">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;
  margin: 0.5em 0;
}
[draggable=true] {
  cursor: move;
}

JavaScript

var indexOf = Function.prototype.call.bind(Array.prototype.indexOf);

$('li').on('dragstart', function(evt){
  var type = $(this).attr('data-type');
  var data = $(this).text();
  evt.originalEvent.dataTransfer.setData(type, data);
});

$('.dropzone').on('dragover', function(evt){
  var accept = $(this).attr('data-accept');
  if(indexOf(evt.originalEvent.dataTransfer.types, accept) !== -1){
    evt.preventDefault();
  }
});

$('.dropzone').on('dragenter', function(evt){
  var accept = $(this).attr('data-accept');
  if(indexOf(evt.originalEvent.dataTransfer.types, accept) !== -1){
    $(this).addClass('valid');
  }
});

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

$('.dropzone').on('drop', function(evt){
  evt.preventDefault();
  $(this).removeClass('valid');
  var key = $(evt.target).attr('data-accept');
  var val = evt.originalEvent.dataTransfer.getData(key);
  window.alert(val + ' ist ' + key);
});