Skip to content

Instantly share code, notes, and snippets.

@avtehnik

avtehnik/gist:5599424

Last active December 17, 2015 11:08
Show Gist options
  • Save avtehnik/5599424 to your computer and use it in GitHub Desktop.
Save avtehnik/5599424 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<html slick-uniqueid="1"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://fiddle.jshell.net/js/lib/mootools-core-1.3.2-compat.js"></script>
<script type="text/javascript" src="http://fiddle.jshell.net/js/lib/mootools-more-1.3.2.1-full-compat.js"></script>
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/result-light.css">
<style type="text/css"></style>
<script type="text/javascript">//<![CDATA[
window.addEvent('load', function() {
var l1st = document.getElement('table tbody');
new Sortables(l1st , {
clone:true,
handle:'.handle',
handles:'.handle',
initialize: function(){
this.detach();
this.list = l1st;
this.elements = $$('#items tr.sortme');
this.bound = {
'start': [],
'moveGhost': this.moveGhost.bindWithEvent(this)
};
for (var i = 0, l = this.handles.length; i < l; i++){
this.bound.start[i] = this.start.bindWithEvent(this, this.elements[i]);
}
this.attach();
},
onComplete: function(el,cp) {
console.log(this);
el.setStyle('background','#ddd');
var order = [];
$$('#items tr.sortme').each(function(tr) {
order.push(parseInt(tr.id));
});
},
revert: { duration: 50, transition: 'elastic:out' }
});
});//]]>
</script>
</head>
<body>
<table id="items" class="sortable">
<tbody>
<tr class="sortme" >
<td class="handle">1</td>
<td>text 1</td>
</tr><tr class="sortme">
<td class="handle">2</td>
<td>text 2</td>
</tr>
<tr class="sortme">
<td class="handle">3</td>
<td>text 3</td>
</tr>
<tr class="sortme">
<td class="handle">4</td>
<td>text 4</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment