Skip to content

Instantly share code, notes, and snippets.

@rabehasy

rabehasy/index.html

Created March 2, 2021 14:14
Show Gist options
  • Save rabehasy/1b8d4e58ee393a5cec647e1e5c558b42 to your computer and use it in GitHub Desktop.
Save rabehasy/1b8d4e58ee393a5cec647e1e5c558b42 to your computer and use it in GitHub Desktop.
Download ZIP
Sortable: `put: []` demo // source https://jsbin.com/rayuvob
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sortable: `put: []` demo</title>
<!-- Sortable.js -->
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<style id="jsbin-css">
ul {
list-style: none;
padding: 0;
}
li {
background: #eee;
margin: 1px;
padding: 5px 10px;
}
.sortable-ghost {
opacity: .6;
}
</style>
</head>
<body>
<ul id="bar">
<li data-id="1">Visite de suivi 1</li>
<li data-id="2">Visite de suivi 2</li>
<li data-id="3">Visite de suivi 3</li>
<li data-id="4">Visite de suivi 4</li>
<li data-id="5">Visite de suivi 5</li>
</ul>
<input type="button" value="GET" id="btn">
<script id="jsbin-javascript">
let draggable = Sortable.create(document.getElementById('bar'));
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('btn').addEventListener('click', function () {
console.log(draggable.toArray())
})
});
</script>
<script id="jsbin-source-css" type="text/css">ul {
list-style: none;
padding: 0;
}
li {
background: #eee;
margin: 1px;
padding: 5px 10px;
}
.sortable-ghost {
opacity: .6;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">let draggable = Sortable.create(document.getElementById('bar'));
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('btn').addEventListener('click', function () {
console.log(draggable.toArray())
})
});</script></body>
</html>
Raw
jsbin.rayuvob.css
ul {
list-style: none;
padding: 0;
}
li {
background: #eee;
margin: 1px;
padding: 5px 10px;
}
.sortable-ghost {
opacity: .6;
}
Raw
jsbin.rayuvob.js
let draggable = Sortable.create(document.getElementById('bar'));
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('btn').addEventListener('click', function () {
console.log(draggable.toArray())
})
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment