JSFiddle - React, Tailwind, and code Playground

by Bhaumik Mehta

HTML

<div id="store">
		<div class="catalogContainer">
			<h2>Catalog</h2>
			<ul id="catalogNode" class="container"></ul>
		</div>

		<div class="cartContainer">
			<h2>Cart</h2>
			<ol id="cartNode" class="container"></ol>
		</div>
		<div class="wishlistContainer">
			<h2>Wishlist</h2>
			<ol id="wishlistNode" class="container"></ol>
		</div>

		<p class="instructions"><b>Instructions:</b> Drag products from the Catalog into either the Cart or Wishlist.</p>

		<p class="details"><b>Notes:</b></p>
		<ul>
			<li>This is step 2 in the SitePen blog’s <a href="http://www.sitepen.com/blog/?p=3198">Dojo Drag’n’Drop Redux</a>.</li>
			<li>The Wishlist accepts anything in the store; the Cart only accepts items marked as in stock.</li>
			<li>Reassignments between lists are possible, as long as the target list will accept the item being reassigned.</li>
			<li>Standard multiple selection works here. Beware; you can only drop a group if every item can be dropped into the list you’re attempting to drop them on!</li>
			<li>The Wishlist and Cart are both regular ordered lists; feel free to re-order them internally via drag and drop as well.</li>
			<li>Breakthrough at the lab! It’s possible to clone products!</li>
		</ul>
	</div>

CSS

.dojoDndAvatar			{font-size: 75%; color: black;}
.dojoDndAvatarHeader td	{padding-left: 20px; padding-right: 4px;  height: 16px;}
.dojoDndAvatarHeader	{background: #ccc;}
.dojoDndAvatarItem		{background: #eee;}
.dojoDndMove .dojoDndAvatarHeader	{background-image: url(images/dndNoMove.png); background-repeat: no-repeat;}
.dojoDndCopy .dojoDndAvatarHeader	{background-image: url(images/dndNoCopy.png); background-repeat: no-repeat;}
.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{background-image: url(images/dndMove.png); background-repeat: no-repeat;}
.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{background-image: url(images/dndCopy.png); background-repeat: no-repeat;}
.dojoDndHandle {cursor: move;}
.dojoDndIgnore {cursor: default;}
.dj_a11y .dojoDndAvatar { font-size: 1em; font-weight:bold;}
.dj_a11y .dojoDndAvatarHeader td {padding-left:2px !important;}
.dj_a11y .dojoDndAvatarHeader td span {padding-right: 5px;}

/* Copyright (c) 2008 SitePen, Inc. All Rights Reserved */

body {
	margin: 0 auto;
	padding: 0;
	border-top: 10px solid #5bbdea;
	width: 800px;
}

#toggle {
	text-align: right;
	font-size: .85em;
	margin-top: .5em;
}

#store {
	padding: 1em 2em 1em 1em;
}

#footer {
	clear: both;
	padding: 2em .5em .5em .5em;
	background: url("images/footer.png") repeat-x bottom left;
	line-height: 3.6em;
	font-size: 0.85em;
	color: #888;
}

#sitepen {
	float: right;
}

#sitepen img {
	border: 0;
}

h1 {
	text-indent: -9999em;
	width: 800px;
	height: 0;
	padding: 160px 0 0 0;
	margin: 0;
	background: url("images/header-2.png") no-repeat 0 0;
}

h2 {
	margin: 0 0 0 1em;
	line-height: 2em;
}

ol, ul, div {
	margin: 0;
}

.container {
	border:1px solid #aaa;
	padding: 1em;
	cursor: default;
	background:#fff;
}

.wishlistContainer, .catalogContainer, .cartContainer {
	float: left;
	margin-right: 20px;
	width: 233px;
}

.catalogContainer ul {
	height: 300px;
}

.cartContainer ol {
	background: url("images/cart.jpg") no-repeat -20px 60px;
	height:...

JavaScript

require([ "dojo/dom-class", "dojo/dnd/Source", "dojo/domReady!" ], function(domClass, Source){
			var catalog = new Source("catalogNode", { accept: [ "inStock", "outOfStock" ] });
			catalog.insertNodes(false, [
				{ data: "<div>Wrist watch</div>",        type: [ "inStock" ] },
				{ data: "Life jacket",        type: [ "inStock" ] },
				{ data: "Toy bulldozer",      type: [ "inStock" ] },
				{ data: "Vintage microphone", type: [ "outOfStock" ] },
				{ data: "TIE fighter",        type: [ "outOfStock" ] },
				{ data: "Apples",             type: [ "inStock" ] },
				{ data: "Bananas",            type: [ "inStock" ] },
				{ data: "Tomatoes",           type: [ "outOfStock" ] },
				{ data: "Bread",              type: [ "inStock" ] }
			]);
			catalog.forInItems(function(item, id, map){
				domClass.add(id, item.type[0]);
			});

			var cart = new Source("cartNode", { accept: [ "inStock" ] });
			var wishlist = new Source("wishlistNode", { accept: [ "inStock", "outOfStock" ] });
		});