JSFiddle - React, Tailwind, and code Playground

by Sumit Patel

HTML

<h4>Drag Items </h4>
<ul>
<li class="clsDragItem"><span  id="Div">Div</span></li>
<li class="clsDragItem" ><span id="Textbox">Textbox</span></li>
</ul>
<hr>
<h4>
Drop Into Div
</h4>
<div class="MainDroppableDiv" id="MainDroppableDiv">
</div>
<input type="hidden" id="idDesnLastCnt" value="1"/>

CSS

.clsDragItem
{
  flaot:left;
  color:#000;
  border:1px dotted #c2c2c2;
  width:150px;
}
ul li
{
  list-style: none;
  cursor:move;
  margin:5px;
  padding:5px;
  float:left;
}
hr,h4
{
  float:left;
  width:100%;
}
.MainDroppableDiv
{
  border:1px solid black;
  padding:5px;
  width:98%;
  float:left;
  min-height:150px;
  height:auto;
}
/* Form Content Drag (Helper) - Drop in Div Box Display*/
.cs_block-placeholder {
	height: 50px !important;
	/*border: 1.4px dotted blue;*/
	border: 2px dashed #660000;
	margin-bottom: 10px;
	width: 100%;
  float:left;
}

.MainDiv
{
  width:98%;
  float:left;
  padding:2px;
  border:1px solid #ff6600;
  min-height:150px;
  position:relative;
  margin-bottom:5px;
}
.MainTextbox
{
   width:90%;
  float:left;
  padding:2px;
  border:1px solid #ff6600;
  min-height:20px;
  position:relative;
  margin-bottom:5px;
}
.claspaneldiv
{
  width:200px;
  float:left;
  min-height:100px;
  border:1px solid #ff0000;
  margin-right:2px;
}
.addnewdiv
{
  position: absolute;
    right: 0;
    top: 0;
    cursor:pointer;
}

JavaScript

/* Declare Dropcount var*/
		var DropCount = 1;
		$("#MainDroppableDiv,.claspaneldiv").sortable({
			placeholder: 'cs_block-placeholder'
		});
    
    $(".clsDragItem").draggable({
			connectToSortable: '#MainDroppableDiv,.claspaneldiv',
			helper: 'clone',
			revert: 'invalid',
			containment: "body",
			snap: "body",
			cursor: 'move',
			tolerance: 'pointer',
			helper: function () {
				var helper = $(this).clone(); /* Untested - I create my helper using other */
				/* jquery.ui.sortable will override width of class unless we set the style explicitly.*/
				helper.css({ 'width': '130px', 'height': '30px', 'border': '1px dashed #A7A7A7', 'padding': '5px', 'padding-left': '10px' });
				return helper;
			},
			zIndex: 100000,
			start: function (event, ui) {

				/* declare Draggable Action : DragItems_From_ControlList */
				draggable_Actions = "DragItems_From_ControlList";

				/* Add Tempory DropBlankClass Add */
				$(ui.helper).addClass("DropBlankClass");

			},
			stop: function (event, ui) {
				
				/* Remove Drop Blank Highlight Div */
				$(ui.helper).removeClass('cs_block-placeholder');
				/* Remove Tempory DropBlankClass After Items Drop*/
        
				if (draggable_Actions == "Dropped") {
        	var Get_Content_data = $(".DropBlankClass").contents();
					$(".DropBlankClass").replaceWith(Get_Content_data).focus();
         
				}
			}
		});
    $("#MainDroppableDiv").droppable({
			over: function () {
				/* Over Function Call to hover droppable Div  then set vaule 1 */
				DropCount = 1;

			},
			drop: function (event, ui) {
				/* Get Drag items ID*/
				var GetDragData = ui.draggable.context.outerHTML;
        
				var DargID = $.trim(GetDragData.split("id=")[1].split('">')[0].split('"')[1]);

				/* Check Draggable Action */
				if (draggable_Actions == "DragItems_From_ControlList") {
					
					if (DropCount == 2) {
						/* After Items Drop Then Dropcount Set & Draggable Action : Dropped*/
						DropCount = 1;
						/**************...