Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created November 2, 2017 23:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/84d9225ed87f8feaf4798c96591736cf to your computer and use it in GitHub Desktop.
Save CodeMyUI/84d9225ed87f8feaf4798c96591736cf to your computer and use it in GitHub Desktop.
Download ZIP
Sortable columns
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="//cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
</head>
<body>
<h3>Click the blue headers and drag to move columns.</h3>
<div class="table" id="draggableDivTable">
<div class="column">
<div class="columnHeader">column 0</div>
<div class="columnCell"> c0 r0</div>
<div class="columnCell"> c0 r1</div>
<div class="columnCell"> c0 r2 </div>
<div class="columnCell"> c0 r3 </div>
<div class="columnCell"> c0 r4 </div>
<div class="columnCell"> c0 r5 </div>
</div>
<div class="column">
<div class="columnHeader">column 1</div>
<div class="columnCell"> c1 r0</div>
<div class="columnCell"> c1 r1</div>
<div class="columnCell"> c1 r2 </div>
<div class="columnCell"> c1 r3 </div>
<div class="columnCell"> c1 r4 </div>
<div class="columnCell"> c1 r5 </div>
</div>
<div class="column">
<div class="columnHeader">column 2</div>
<div class="columnCell"> c2 r0</div>
<div class="columnCell"> c2 r1</div>
<div class="columnCell"> c2 r2 </div>
<div class="columnCell"> c2 r3 </div>
<div class="columnCell"> c2 r4 </div>
<div class="columnCell"> c2 r5 </div>
</div>
</div>
<script src="sortable.js"></script>
</body>
</html>
Raw
script.js
Sortable.create(document.getElementById('draggableDivTable'), {
sort: true,
handle: '.columnHeader',
animation: 150
});
Raw
style.css
div.table {
border: 3px solid black;
display: inline-flex;
}
.column > div {
border: 1px solid black;
flex: 1;
}
.columnHeader {
padding:4px;
background-color:lightBlue;
}
.columnCell {
padding:3px;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment