JSFiddle - React, Tailwind, and code Playground

by lightbringer

HTML

<div id="taskOpen">
					<div data-role="header" data-theme="e">
						<h5>Open Tasks</h5>
					</div>					
                    <div id="wrapper_taskOpen">
						<ul id="taskopenlist" class="stickynote">
							<li id="draggable">
								<a href="#" id="pos">
									<h3>Title #2</h3>
									<p>Text Content #2</p>
								</a>
							</li>
							<li id="draggable">
								<a href="#" id="pos1">
									<h3>Title #3</h3>
									<p>Text Content #3</p>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div id="taskAssigned">
					<div data-role="header" data-theme="e">
						<h5>Assigned Tasks</h5>
					</div>
					<div id="wrapper_taskAssigned">
						<ul id="taskassignlist" class="stickynote">
						</ul>
					</div>
				</div>
				<div id="taskClosed">
					<div data-role="header" data-theme="e">
						<h5>Closed Tasks</h5>
					</div>
					<div id="wrapper_taskClosed">
						<ul id="taskcloselist" class="stickynote">
						</ul>
					</div>
				</div>

CSS

#userstoryListing, #taskAssigned, #taskOpen, #taskClosed {
	outline: 1px solid grey;
	float: left;
	height: 100%;
	margin: 0px 3px;
	width: 24.5%;
}

#wrapper_userstoryListing, #wrapper_taskAssigned, #wrapper_taskOpen, #wrapper_taskClosed {
	position: relative;
	width: 100%;
	z-index: 1;
}

h3, p {
	text-align: center;
}

ul.stickynote, li {
	list-style: none;
}

ul.stickynote {
	overflow: visible;
	padding: 3px;
}

ul.stickynote li a {
	text-decoration: none;
	color: #000;
	background: #ffc;
	display: block;
	height: 100px;
	width: 110px;
	padding: 1px;
	
	position: absolute;
	
	  /* Firefox */  
	-moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
	-moz-transform:rotate(-6deg);
	/* Safari+Chrome */  
	-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
	-webkit-transform:rotate(-6deg);
	/* Opera */  
	box-shadow: 5px 5px 7px rgba(33,33,33,.7);
	-o-transform:rotate(-6deg);
}

ul.stickynote li:nth-child(even) a {
	-o-transform:rotate(4deg);  
	-webkit-transform:rotate(4deg);  
	-moz-transform:rotate(4deg);  
/*	position:relative;	*/
	position: absolute;
	top:5px;  
}

ul.stickynote li:nth-child(3n) a {
	-o-transform:rotate(-3deg);  
	-webkit-transform:rotate(-3deg);  
	-moz-transform:rotate(-3deg);  
/*	position:relative;	*/
	position: absolute;
	top:-5px;  
}
ul.stickynote li:nth-child(5n) a{  
	-o-transform:rotate(5deg);  
	-webkit-transform:rotate(5deg);  
	-moz-transform:rotate(5deg);  
/*	position:relative;	*/
	position: absolute;
	top:-10px;  
}  

ul.stickynote li a:hover, ul.stickynote li a:focus {
	/* Firefox */
	-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);  
	-moz-transform: scale(1.25);  
	/* Safari + Chrome */
	-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);  
	-webkit-transform: scale(1.25);  
	/* Opera */
	box-shadow:10px 10px 7px rgba(0,0,0,.7);  
	-o-transform: scale(1.25);  
	
/*	position:relative;	*/
	position: absolute;
	z-index:5;  
}

ul.stickynote li {
	margin: 0.3em 0.6em 1em;
/*	float:left;			*/
}

JavaScript

$("li[id='draggable']") .draggable({
			appendTo: ".content",
			revert: "invalid",
			cursor: "move"
		});

		$("#taskAssigned").droppable({
			accept: "#wrapper_taskOpen li, #wrapper_taskAssigned li",
			drop: function(event, ui) {
			// accepts items from taskOpen
				if (ui.draggable.parent().parent().parent().attr("id") == "taskOpen") {
					ui.draggable.detach().appendTo($("#taskassignlist")).removeAttr("style").attr("style", "position:relative;");
					var linkOffset = ui.draggable.find("a").offset();
					ui.draggable.find("a").removeAttr("style").css({left:event.pageX - linkOffset.left, top:event.pageY - linkOffset.top});
				}
			// accept internal drops (change position of the stickynote)
				else if (ui.draggable.parent().parent().parent().attr("id") == "taskAssigned") {
					ui.draggable.detach().appendTo($("#taskassignlist")).removeAttr("style").attr("style", "position:relative;");
					var linkOffset = ui.draggable.find("a").offset();
					ui.draggable.find("a").removeAttr("style").css({left:event.pageX - linkOffset.left, top:event.pageY - linkOffset.top});
				}
			}
		});