Skip to content

Instantly share code, notes, and snippets.

@fhdalikhan

fhdalikhan/gist:6ff217c4ed31fac9e41aa508293f0f82

Created November 15, 2018 10:38
Show Gist options
  • Save fhdalikhan/6ff217c4ed31fac9e41aa508293f0f82 to your computer and use it in GitHub Desktop.
Save fhdalikhan/6ff217c4ed31fac9e41aa508293f0f82 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery UI sortable implementation
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.0/css/font-awesome.css">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<style>
.ui-sortable {
width: 350px;
margin: 50px auto;
background-color: #ccc;
-webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .1);
list-style-type: none;
padding: 0;
}
.ui-sortable li.ui-state-default {
margin: 0;
height: 45px;
line-height: 48px;
font-size: 1.4em;
color: #fff;
outline: 0;
padding: 0;
margin: 0;
text-indent: 15px;
background: rgb(78,82,91);
background: -moz-linear-gradient(top, rgb(78,82,91) 0%, rgb(57,61,68) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(78,82,91)), color-stop(100%,rgb(57,61,68)));
background: -webkit-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
background: -o-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
background: -ms-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
background: linear-gradient(to bottom, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
border-top: 1px solid rgba(255,255,255,.2);
border-bottom: 1px solid rgba(0,0,0,.5);
text-shadow: -1px -1px 0px rgba(0,0,0,.5);
font-size: 1.1em;
position: relative;
cursor: pointer;
}
.ui-sortable li.ui-state-default:first-child {
border-top: 0;
}
.ui-sortable li.ui-state-default:last-child {
border-bottom: 0;
}
.ui-sortable-placeholder {
border: 3px dashed #aaa;
height: 45px;
width: 344px;
background: #ccc;
}
.ui-sortable li.ui-state-default:after {
content: "\f0c9";
display: inline-block;
font-family: "FontAwesome";
position: absolute;
right: 18px;
top: 9px;
text-align: center;
line-height: 35px;
color: rgba(255,255,255,.2);
text-shadow: 0px 0px 0px rgba(0,0,0,0);
cursor: move;
}
</style>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
<script>
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-sortable-placeholder"
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment