JSFiddle - React, Tailwind, and code Playground

by Dilip Prajapati

HTML

<div>
	column: 

	<select id="sel_gridColumn" class="screen-partition" >
		<option>3</option>
		<option selected="selected">4</option>
		<option>5</option>
		<option>6</option>
		<option>7</option>
		<option>8</option>
		<option>9</option>
	</select>  <span class="icon_bg icon-x">- row -</span>
	<select id="sel_gridRow" class="screen-partition"><option>3</option></select>
	<br>
	<hr>
	<div id="mobile_screen" class="grid">
		<div class="screenrow">
			<div class="screencell" id="cell_1_1"></div>
			<div class="screencell" id="cell_1_2"></div>
			<div class="screencell" id="cell_1_3"></div>
			<div class="screencell" id="cell_1_4"></div>
			<div class="screencell" id="cell_1_5"></div>
		

		</div>
		<div class="screenrow">
			<div class="screencell" id="cell_2_1"></div>
			<div class="screencell" id="cell_2_2"></div>
			<div class="screencell" id="cell_2_3"></div>
			<div class="screencell" id="cell_2_4"></div>
			<div class="screencell" id="cell_2_5"></div>
		

		</div>
		<div class="screenrow">
			<div class="screencell" id="cell_3_1"></div>
			<div class="screencell" id="cell_3_2"></div>
			<div class="screencell" id="cell_3_3"></div>
			<div class="screencell" id="cell_3_4"></div>
			<div class="screencell" id="cell_3_5"></div>
			

		</div>

	</div>
	</div>
<br>
	<div class="app-listing">
		<div class="screencellbook" id="app-1">App - 1</div>
		<div class="screencellbook" id="app-2" style="background-color: #faa000;">App - 2</div>
		<div class="screencellbook" id="app-3" style="background-color: #fdd000;">App - 3</div>
	</div>

CSS

.screenrow {
		width: 100%;
		height: 30px;
		padding-left: 2px;
		margin-bottom: 2px;
	}

	.screencell {
		width: 79px;
		height: 64px;
		float: left;
		cursor: hand;
		cursor: pointer;
		/*border-right: #FC6 2px dotted;*/
		border-left: #FC6 2px dotted;
		border-bottom: #FC6 2px dotted;
		/*border-top: #FC6 2px dotted;*/
		background-color: #fff;
	}

	.screencellbook {
		width: 78px;
		height: 64px;
		font-size: 12px;
		font-weight: bold;
		color: #FFFFFF;
		float: left;
		cursor: hand;
		cursor: pointer;
		background-color: #ff0000;
	}
	.app-listing {
		margin-top: 25px;
		/*float: left;*/
	}
	.app-listing .screencellbook{
		margin: 5px;
	}
	.grid{
		width: 450px;
		height: 200px;
	}

JavaScript

$(function() {

		/*Mobile screen row to column selected.*/
		$("#sel_gridColumn").on("change",function() {
			var period = this.value;
			$('#sel_gridRow').empty()
			for(i = 3; i <= period; i++) { 
				$("#sel_gridRow").append("<option value="+i+">"+i+"</option>");

			}
			$("#sel_gridRow").val(period);
		});

		/*alert Message select drop-down screen size*/
		$('.screen-partition').on("change",function(){
			
			var row=$('#sel_gridRow').val();
			var column=$('#sel_gridColumn').val();
			
			setTimeout(function(){ 
				alert('The components outside of '+column+' x '+row+' area on each page will be removed'); 
				screenGridset(column,row);
			}, 500);
		});
	});

	function screenGridset(column,row)
	{
		var width=450;
		var height=200;

		$('.grid').empty()
		// console.log('column='+column +'-----row='+ row);
		for(i = 1; i <= row; i++) { 
				// $("#sel_gridRow").append("<option value="+i+">"+i+"</option>");
				$(".grid").append("<div class='screenrow'></div>");
				// console.log($(".grid").append("<div class='screenrow'></div>"));
				for(j = 1; j <= column; j++) { 
				var cell_height=(height/row)-2; /*cell_height in -2px because every screencell border-bottom 2px.*/
				var cell_width=(width/column)-2; /*cell_height in -2px because every screencell border-left 2px.*/
					$(".grid").append("<div class='screencell' id='cell_"+i+"_"+j+"' style='height: "+cell_height+"px; width: "+cell_width+"px;'></div>");
					// console.log($(".grid").append("<div class='screencell'></div>"));
				}
			}

	}

	$('.screencellbook').draggable({
		helper: 'clone',
		cursor: 'move',
		snap: '.screencell',
		snapMode: 'inner'
	});
	$('.screencell').droppable({
		over: function(event, ui) {
			var $this = $(this);
		},
		drop: function(event, ui) {
			alert($(this).attr('id'))
			var aa=$(this).attr('id');
			var droppable = $(this);
			var draggable = ui.draggable;

			console.log($("#"+aa+" > div").length);
			if ( $("#"+aa+" > div").length > 0)
			{
				alert("This div...