JSFiddle - React, Tailwind, and code Playground

by vijaysolankiii

HTML

<script src="https://cdn.jsdelivr.net/gh/dbunic/REDIPS_drag@master/redips-drag-min.js" defer></script>

<div id="main-container">
			<!-- tables inside this DIV could have draggable content -->
			<div id="redips-drag">	
				<!-- left container -->
				<div id="left">
					<table id="table1">
						<colgroup>
							<col width="100"/>
						</colgroup>
						<tbody>
							<!-- clone 2 elements + last element -->
							<tr>
                                <td class="dark"><div id="e" class="redips-drag redips-clone orange">Drag  1</div></td>
                                <td class="dark"><div id="f" class="redips-drag redips-clone green">Drag  2</div></td>
                                <td class="dark"><div id="e" class="redips-drag redips-clone orange">Drag 3</div></td>
                                <td class="redips-trash">Delete</td>
                            </tr>
						</tbody>
					</table>
				</div><!-- left container -->
				
				<!-- right container -->
				<div id="right">
					<table id="table2">
						<colgroup>
							<col width="100"/>
							<col width="100"/>
							<col width="100"/>
							<col width="100"/>
						</colgroup>
						<tbody>
							<tr>
								<td class="redips-mark"></td>
								<td class="redips-mark"></td>
								<td class="redips-mark"></td>
								<td class="upper-right redips-mark"></td>
							</tr>
							<tr>
								<td class="redips-mark"></td>
								<td class="redips-mark"></td>
								<td class="redips-mark"></td>
								<th class="redips-mark"></th>
							</tr>
							<tr>
								<td class="redips-mark"></td>
								<td class="redips-mark"></td>
								<td class="redips-mark"></td>
								<th class="redips-mark"></th>
							</tr>
							<tr>
								<td class="last"></td>
								<th class="last"></th>
								<th class="last"></th>
								<th class="last"></th>
							</tr>
							<tr>
								<td class="lower-left last"></td>
								<th class="last"></th>
								<th...

CSS

body {
  font-family: arial;
  margin: 0px; /* for IE6 / IE7 */
}

/* drag container */
#main-container {
	margin: auto;
	width: 100%;
	max-width: 1200px;
}
/* container for the right table */
#main-container #right {
  display: table;
  table-layout: auto;
  padding-left: auto;
  padding-right: 0px;
  margin: 0 auto;
  width: 100%;
}
/* drag objects (DIV inside table cells) */
.redips-drag {
  cursor: move;
  margin: auto;
  z-index: 10;
  background-color: white;
  text-align: center;
  font-size: 18pt; /* needed for cloned object */
  opacity: 0.7;
  filter: alpha(opacity=70);
  /* without width, IE6/7 will not apply filter/opacity to the element ?! */
  /* IE needs element layout */
  width: 87px;
  height: 35px;
  line-height: 35px;
  /* round corners */
  border-radius: 4px; /* Opera, Chrome */
  -moz-border-radius: 4px; /* FF */
}

/* tables */
div#redips-drag table {
  background-color: #eee;
  border-collapse: collapse;
  width: 100%;
}
/* timetable */
div#redips-drag #table2 {
  width: 100%;
}

/* table cells */
div#redips-drag td,
th {
  border-style: solid;
  height: 50px;
  text-align: center;
  font-size: 10pt;
  padding: 2px;
}
/* left table - td */
div#redips-drag #table1 td {
  border-width: 0px 0px 1px 0px;
  border-color: white;
}

/* right table - td */
div#redips-drag #table2 td {
  border-width: 0px 3px 3px 0px;
  border-color: #000000;
  font-weight: normal;
}

/* right table - th */
div#redips-drag #table2 th {
  border-width: 3px 0px 0px 3px;
  border-color: #000000;
  font-weight: normal;
}

/* right table - upper right cell */
div#redips-drag #table2 .upper-right {
  border-width: 0px;
}

/* right table - lower left cell */
div#redips-drag #table2 .lower-left {
  border-width: 0px;
}

/* last row and last column without border */
.noborder {
  border-width: 0px;
}

/* green objects */
.green {
  border: 2px solid #499b33;
}

/* orange objects */
.orange {
  border: 2px solid #bf6a30;
 ...

JavaScript

/* enable strict mode */
'use strict';
let redips = {};
redips.init = function () {
	let rd = REDIPS.drag;
	rd.init();
	rd.hover.colorTd = '#9BB3DA';
    rd.hover.borderTd = '1px dashed #007bff';
	// single element per cell
	rd.dropMode = 'single';
	// event handler invoked after element is cloned    
	rd.event.cloned = function () {
		// set id of cloned DIV element
		let clonedId = rd.obj.id;
		// if DIV id begins with "e" then make exception (allow dragged DIV to enter TD with class name "redips-mark")
		if (clonedId.substr(0, 1) === 'e') {
			rd.mark.exception[clonedId] = 'mark';
		}
	};
    
};


// add onload event listener
if (window.addEventListener) {
	window.addEventListener('load', redips.init, false);
}
else if (window.attachEvent) {
	window.attachEvent('onload', redips.init);
}