Skip to content

Instantly share code, notes, and snippets.

@stevepiercy

stevepiercy/index.html

Last active March 17, 2017 09:27
Show Gist options
  • Save stevepiercy/d60daa99714f61b8c3aa283f8dd14326 to your computer and use it in GitHub Desktop.
Save stevepiercy/d60daa99714f61b8c3aa283f8dd14326 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sortable Demo</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<body>
<!-- Simple List -->
<div id="simpleList" class="list-group">
<div class="list-group-item" data-id="field_1">
<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
<input name="field_1" type="text" value="1 - Item">
</div>
<div class="list-group-item" data-id="field_2">
<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
<input name="field_2" type="text" value="2 - Item">
</div>
<div class="list-group-item" data-id="field_3">
<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
<input name="field_3" type="text" value="3 - Item">
</div>
<div class="list-group-item" data-id="field_4">
<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
<input name="field_4" type="text" value="4 - Item">
</div>
<div class="list-group-item" data-id="field_5">
<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
<input name="field_5" type="text" value="5 - Item">
</div>
</div>
<button name="submit" type="submit" value="Export" onClick="show();">Show Order of Items</button>
<h1 id="show"></h1>
</body>
<!-- Latest Sortable -->
<script src="https://rubaxa.github.io/Sortable/Sortable.js"></script>
<script>
// Simple list
Sortable.create(simpleList, {
handle: '.glyphicon-move',
animation: 150
});
var el = document.getElementById('simpleList')
var sortable = Sortable.create(el, { })
function show(){
var order = sortable.toArray();
document.getElementById('show').innerHTML = order;
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment