JSFiddle - React, Tailwind, and code Playground

Sortable Lists

by Jennifer Perrin

HTML

<!----------------------------------- SORT LIST NORMAL (2) -->
<div class="col">
<div id="wrapper">
<h1>Ordinary Sortable List</h1>
<p>This is a basic drag and drop effect that allows you to sort the order of the list elements without saving. This can be implemented quickly to a number of different fields and areas or forms.</p>
<p>The javascript for this section is clearly labelled in the js/jsfunctions.js file where you can amend and add functions for each of these sections</p>

<ul id="sortlistTwo">
<li>New York</li>
<li>San Francisco</li>
<li>London</li>
<li>Manchester</li>
</ul>            
</div>
</div>

<!----------------------------------- END -->

<!----------------------------------- SORT LIST TWO COLUMNS (3) -->
<div class="col">
<div id="wrapper">
<h1>Sort List into Two Columns</h1>
<p>This is a basic drag and drop effect that allows you to sort the order of the list elements without saving. This can be implemented quickly to a number of different fields and areas or forms.</p>
<p>The javascript for this section is clearly labelled in the js/jsfunctions.js file where you can amend and add functions for each of these sections</p>

<ul id="sortlistThree">
<li>New York</li>
<li>San Francisco</li>
<li>London</li>
<li>Manchester</li>
<li>Newcastle</li>
<li>Cape Town</li>
<li>Berlin</li>
<li>Paris</li>
<div class="clear"></div>
</ul>            
</div>
</div>

<!----------------------------------- END -->

CSS

*{
margin:0;
padding:0;
}

body{
background:#eaeaea;
color:#666;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

h1{
    font-size:15px;
    text-align:center;
    border-bottom:1px solid #ddd;
    padding-bottom:5px;
    margin-bottom:5px;
}

p{
    font-family:"Times New Roman", Times, serif;
    font-style:italic;
    font-size:11px;
    line-height:18px;
    margin-bottom:10px;
}

#wrapper{
width:90%;
margin:0 auto;
padding:5%;
margin-top:20px;
-moz-box-shadow: 0px 2px 8px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow: 0px 2px 8px rgba(000, 000, 000, 0.5), inset 0px 0px 2px rgba(255, 255, 255, 0.7);
box-shadow: 0px 2px 8px rgba(000, 000, 000, 0.5), inset 0px 0px 2px rgba(255, 255, 255, 0.7);
background:#fff;
border:10px solid #eaeaea;
}

#message{
width:90%;
margin:0 auto;
padding:5%;
margin-top:20px;
background:#fff;
text-align:center;
-moz-box-shadow: 0px 2px 8px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow: 0px 2px 8px rgba(000, 000, 000, 0.5), inset 0px 0px 2px rgba(255, 255, 255, 0.7);
box-shadow: 0px 2px 8px rgba(000, 000, 000, 0.5), inset 0px 0px 2px rgba(255, 255, 255, 0.7);
background:#fff;
border:10px solid #eaeaea;

}

.col{
    float:left;
    width:29%;
    margin:2%;
}

/*---------------------------- LIST SPECIFIC ITEMS */


.button{
    padding:10px;
    float:right;
    width:auto;
    background:#666;
    color:#eaeaea;
    border:0;
    cursor:pointer;
}

a{
    text-decoration:none;
}

.clear{
    clear:both;
    width:100%;
}

/*-------------------------- SORT LIST ONE */
#sortlist { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 98%; 
}

#sortlist li {  
padding:10px; 
width:94%; /* change this to your own width */
font-size: 12px; 
height: 18px; 
border:1px solid #ccc; 
margin-bottom:5px; 
cursor:move; 
background:#fff;
}

/*-------------------------- SORT LIST TWO */
#sortlistTwo { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width:...

JavaScript

// JavaScript Document

//------------------------------ MAKE LIST FOR MYSQL (1)
$(function() {
$( "#sortlist" ).sortable({
    update: function(){
        $('#message').html('Items have been moved but not saved');
    }
});
});

//--------- SAVE THE ORDER
$('#button').click(function(event){
       var order = $("#sortlist").sortable("serialize");
       $('#message').html('Saving changes..');
       $.post("save.php",order,function(theResponse){
                     $('#message').html(theResponse);
                     });
       event.preventDefault();
});

//------------------------------ SORT LIST NORMAL (2)
$(function() {
$( "#sortlistTwo" ).sortable({
});
});

//------------------------------ SORT LIST TWO COLUMNS (3)
$(function() {
$( "#sortlistThree" ).sortable({
});
});