Enyo-list ordenable

Lista hecha en Enyo que se ordena con drag and drop

by EDWIN MAURICIO QUISHPE MALDONADO

CSS

.list-sample-language {
	color: white;
}
.list-sample-language-list {
	/*background: url(assets/bg.png);*/
}
.list-sample-language-item {
	height: 80px;
	border-top: 1px solid #000;
	padding: 12px 16px;
	background-color: #333333;
	position:relative;
}
.list-sample-language-list .rowNumberLabel {
	position:absolute;
	right:15px;
	bottom: 10px;
	font-size:12px;
}
.list-sample-language-list .itemLabel {
	font-size:24px;
	line-height:80px;
	padding-left:30px;
}
.list-sample-language-list .serialLabel {
	position:absolute;
	right:80px;
	bottom: 10px;
	font-size:12px;
}
.list-sample-language-list .reorderDragger {
	background:rgb(0,0,0);
}
.list-sample-language-list .swipeGreen {
	background-color:rgb(0,160,40);
}
.list-sample-language-list h2 {
	margin:0;
	padding:0 0 0 20px;
	font-size:24px;
	line-height:100px;
}
.list-sample-language-list .dropButton {
	width:90px;
	height:60px;
	position:absolute;
	top:20px;
	right:110px;
}
.list-sample-language-list .cancelButton {
	width:90px;
	height:60px;
	position:absolute;
	top:20px;
	right:10px;
}
.list-sample-language-list .swipeTitle {
	font-size:30px;
	font-weight:bold;
	text-align:center;
	line-height:100px;
	padding:0;
	margin:0;
}

JavaScript

enyo.kind({
	name: 'ListaDemo',
	kind: 'FittableRows',
	classes: 'list-sample-language enyo-fit',
	data: [],
	components: [
		{kind: 'onyx.MoreToolbar', layoutKind: 'FittableColumnsLayout', style: 'height: 55px;', components: [
			{content: 'Rows:'},
			{kind: 'onyx.InputDecorator', components: [
				{kind: 'onyx.Input', value: '10', name: 'numRows' }
			]},
			{kind: 'onyx.Button', content: 'Repopulate', ontap: 'populateList'}
		]},
		{
			kind: 'List',
			classes: 'list-sample-language-list enyo-unselectable',
			fit: true,
			multiSelect: true,
			reorderable: true,
			centerReorderContainer: false,
			onSetupItem: 'setupItem',
			onReorder: 'listReorder',
			onSetupReorderComponents: 'setupReorderComponents',
			components: [
				{name: 'item', classes: 'list-sample-language-item', components: [
					{name: 'text', classes: 'itemLabel'},
					{name: 'rowNumber', classes: 'rowNumberLabel'},
					{name: 'serial', classes: 'serialLabel'}
				]}
			],
			reorderComponents: [
				{name: 'reorderContent', classes: 'enyo-fit reorderDragger', components: [
					{name: 'reorderTitle', tag: 'h2', allowHtml: true}
				]}
			],
		}
	],
	rendered: enyo.inherit(function(sup) {
		return function() {
			sup.apply(this, arguments);
			this.populateList();
		};
	}),
	listReorder: function(inSender, inEvent) {
		var movedItem = enyo.clone(this.data[inEvent.reorderFrom]);
		this.data.splice(inEvent.reorderFrom,1);
		this.data.splice((inEvent.reorderTo),0,movedItem);
        console.log(this.data);
	},
	setupItem: function(inSender, inEvent) {
		var i = inEvent.index;
		if(!this.data[i]) {
			return;
		}
		//var currentLanguage = this.data[i].langs[this.data[i].currentIndex];
		var val = this.data[i].val;
		//var number = this.languages[currentLanguage][val];
        var number = val;
		var serial = this.data[i].serial;
		this.$.rowNumber.setContent('ROW ' + i);
		this.$.text.setContent(number);
		this.$.serial.setContent('#' + serial);
	},
	setupReorderComponents:...