JSFiddle - React, Tailwind, and code Playground

by MayaGans

HTML

<html lang="en">

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

  <body>
    <form class="">
        <ul id="sortable">
         <li class="ui-state-default" id="dropdown">
           <select>
           <option value="volvo">Volvo</option>
           <option value="saab">Saab</option>
           <option value="fiat">Fiat</option>
           <option value="audi">Audi</option>
           </select>
        </li>
       </ul>


      <div id="droppable" class="ui-widget-header">
      <p>Drop here</p>
      </div>
      
    </form>
  </body>
</html>

CSS

#sortable, #sortable1 {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 60%;
        }

li {
   list-style-type: none;
}

#sortable li {
  margin: 5px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  width: 146px;
}

#droppable {
  width: 399px;
  height: 500px;
  padding: 0.5em;
  position: absolute;
  left: 30%;
  top: 7%;
  margin: 10px;
}

#droppable select {
  margin: 5px;
}

JavaScript

$(function () {
$("#sortable").sortable();
$("#sortable").disableSelection();
});

// get the length every select in the droppable div
// create unique ids for each
function getNewId(type) {
	var newId;
	newId = $('#droppable').find('select').length
	return type + (newId + 1);
}

$(function () {
	$(".draggable").draggable();
  $("#droppable").droppable({
  	drop: function (event, ui) {
  	var draggableId = ui.draggable.attr("id");
  	var newid = getNewId(draggableId);
  
  	$(this).append('<li><select   id="' + newid + '"   >' +
  	'<option value="volvo">Volvo</option>' +
  	'<option value="saab">Saab</option>' +
  	'<option value="fiat">Fiat</option>' +
  	'<option value="audi">Audi</option>' +
  	' </select></li>')
  	}
	});
});