JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<div id="a">
  <span name="test1">1.element</span>
  <span name="test2">2.element</span>
  <span name="test3">3.element</span>
  <span name="test4">4.element</span>
</div>
<div id="b"></div>

CSS

#a {background: #BBBBFF;padding:10px;}
#b {background: #BBFFBB;padding:10px;}
span{width:100%;display:block;}

JavaScript

$('span').draggable({
  helper:"clone",
  containment:"document",
  drag:function(event){
    /*  console.log(event);
  var getElement = event.target;
  console.log(getElement);
  var getName = event.target.attributes.name.value;
  console.log(getName); */
    $(this).hide();
  }
});

$('#b').droppable({
  drop:function(event, ui) {  
  	console.log(event);
  
    var attrName = event.toElement.attributes.name.value;
    var attrText = event.toElement.innerHTML;  	
    /* ui.draggable.detach().appendTo($(this)); */
    $(this).append('<div id="'+ attrName +'">'+ attrText +'</div>');
  }
});