JSFiddle - React, Tailwind, and code Playground

by r2d3

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="container">
    <div class="step" id="step_1">
		<h2 class="title">Step 1</h2>
        <div class="image" id="image_10">Image 10</div>
        <div class="image" id="image_11">Image 11</div>
        <div class="image" id="image_12">Image 12</div>
    </div>
    <div class="step" id="step_2">
		<h2 class="title">Step 2</h2>
        <div class="image" id="image_21">Image 21</div>
        <div class="image" id="image_22">Image 22</div>
        <div class="image" id="image_23">Image 23</div>
    </div>
    <div class="step" id="step_3">
		<h2 class="title">Step 3</h2>	
        <div class="image" id="image_31">Image 31</div>
        <div class="image" id="image_32">Image 32</div>
        <div class="image" id="image_33">Image 33</div>
    </div>
</div>

<div id="result">
</div>

CSS

.container {
		width 600px;
	}
	.image {
		background-color:#ffcb05;
		width:400px;
		height:20px;
		margin:5px;
		padding:5px;
		cursor:move;
	}
	.step {
		background-color:#e7e7e7e7;
		border:solid 1px #ccc;
		min-height: 50px;
		margin: 10px;
		padding:10px;
		width:600px;
		vertical-align:top;	
	}

JavaScript

$(function(){

	/* Sort steps */
	$('.container').sortable({
		axis: "y",
		update: function (event, ui) {
			var data = $(this).sortable('toArray');
			$("#result").html("JSON:<pre>"+JSON.stringify(data)+"</pre>");
		}	
	});	
	
	/* Here we will store all data */
    var myArguments = {};	
	
	function assembleData(object,arguments)
	{		
		var data = $(object).sortable('toArray'); // Get array data 
		var step_id = $(object).attr("id"); // Get step_id and we will use it as property name
		var arrayLength = data.length; // no need to explain
		
		/* Create step_id property if it does not exist */
		if(!arguments.hasOwnProperty(step_id)) 
		{ 
			arguments[step_id] = new Array();
		}	
		
		/* Loop through all items */
		for (var i = 0; i < arrayLength; i++) 
		{
			var image_id = data[i];	
			/* push all image_id onto property step_id (which is an array) */
			arguments[step_id].push(image_id);			
		}
		return arguments;
	}	
	
	/* Sort images */
    $('.step').sortable({
		connectWith: '.step',
		items : ':not(.title)',
		/* That's fired first */	
		start : function( event, ui ) {
			myArguments = {}; /* Reset the array*/	
		},		
		/* That's fired second */
		remove : function( event, ui ) {
			/* Get array of items in the list where we removed the item */			
			myArguments = assembleData(this,myArguments);
		},		
		/* That's fired thrird */		
		receive : function( event, ui ) {
		   	/* Get array of items where we added a new item */	
			myArguments = assembleData(this,myArguments);		
		},
		update: function(e,ui) {
			if (this === ui.item.parent()[0]) {
				 /* In case the change occures in the same container */	
				 if (ui.sender == null) {
					myArguments = assembleData(this,myArguments);		
				} 
			}
		},		
		/* That's fired last */			
		stop : function( event, ui ) {					
			/* Send JSON to the server */
			$("#result").html("Send JSON to the server:<pre>"+JSON.stringify(myArguments)+"</pre>");		
		},	
	});
});