http://docs.sencha.com/touch/2.3.1/#!/api/Ext.plugin.SortableList
UPDATED QUESTION:
CODE:
Ext.application({
name: 'Fiddle',
launch: function() {
var templ = new Ext.XTemplate(
'<tpl if="isActive">',
'<div style="color:red" class="',
Ext.baseCSSPrefix + 'list-sortablehandle',
'">',
'</tpl>',
'<b>Name: {text}</b>',
'<tpl if="isActive">',
'</div>',
'</tpl>',
{
// XTemplate configuration:
compiled: true,
// member functions:
isitem2: function (name) {
return name == 'item2';
},
}
);
Ext.Viewport.add({
xtype: 'list',
itemId: 'dynamicContainer',
infinite: true,
plugins: 'sortablelist',
itemTpl: templ,//'<span style="width:30px;height:20px;background-color:gray;display:block;float:left;" class="' + Ext.baseCSSPrefix + 'list-sortablehandle"></span>{text}',
listeners: [{
event: 'dragsort',
fn: function (list, row, from, to) {
console.log(to);
}
}],
data: [{
text: 'Item 1-Active',
isActive:true
}, {
text: 'Item 2-Active',
isActive: true
},
{
text: 'Item 3-Active',
isActive: true
}, {
text: 'Item 4',
isActive: false
},
{
text: 'Item 5',
isActive: false
}]
});
}
});
See in Action:https://fiddle.sencha.com/#fiddle/3kl
With the help of @mishoboss asnswer https://stackoverflow.com/a/21762299/1405008
I did almost(70%) did what I want but I need to restrict the list content in black should not be rearranged by the user, I restricted the user to drag specific cell but when user drag other cell they can place it is inactive cell location to reorder that cell also. But it should not be like so.
As In my attached screen bottom of the list marked in red arrow should not be sortable.
OLD QUESTION I look into sencha touch document there is built in plugin called SortableList.But they never give and example source for how to use that plugin.
RED: list item not allow to drag and sort by user Yello:Sortable list items
I know this is very easy to achieve through jquery.
But I never get any idea or sample to achieve this through sencha touch plugin.
Also I don't want to add Jquery to my app because it may result in performance issue while using with sencha frame work.
Note: Also I just want the user to tap and hold in list to drag not just drag, because it will affect default scroll behavior. Help Please.!