PDA

View Full Version : draggable and droppable list items?



jedihua
27 Jan 2011, 2:15 PM
Hi, Is there any way to set the list item draggable and droppable?

tomalex0
28 Jan 2011, 3:32 AM
Are you looking for sorting list items?.

AndreaCammarata
28 Jan 2011, 5:30 AM
Hi, Is there any way to set the list item draggable and droppable?

There's no configuration propery in List component that allow you to drag & drop your List Items from a List to another one if this is what you mean, but I think that it would be possibile developing a custom plugin / extension.

Hope this helps.

jedihua
28 Jan 2011, 9:12 AM
Thanks, guys. You are right. I'm looking for if I can drag and drop and list item from one to another. I'll see what I can do. If I have something comes out, I'll post it here.

tomalex0
28 Jan 2011, 11:35 PM
I have tried sortable with older version and it worked fine with List,




new Ext.util.Sortable('id of component', {
itemSelector: 'selector cls',
direction: 'vertical',
constrain: true
});


Seems there is some bug in current version, The sortable Example demo itself not working.

We can also implement draggable property for list items.

Below code will helps to render draggable property for list items.

Add this to list


cls:'sortablelist'


Run it in console.


Ext.each(Ext.DomQuery.select('.sortablelist .x-list-item'),function(el,i){
new Ext.util.Draggable(Ext.get(el), {
revert: false
});
});

kortovos
23 Feb 2011, 1:40 AM
There's no configuration propery in List component that allow you to drag & drop your List Items from a List to another one if this is what you mean, but I think that it would be possibile developing a custom plugin / extension.

Hope this helps.

Anyone found out how to drag and drop list items between different lists? (I can already drag and drop them, but the list items aren't shown outside their table)

martinbroos
24 Mar 2011, 2:21 AM
Thanx for your example but i don't get it to work. Where should i place the code?

This is what is got, its inside a Panel:


items: [{
fullscreen: true,
cls:'sortablelist',
xtype: 'list',
store: beheerpaneel.stores.pages,
itemTpl: tpl,
onItemDisclosure: function (record) {
Ext.dispatch({
controller: beheerpaneel.controllers.Pages,
action: 'show',
id: record.getId()
});
},
draggable: true
}],

milton9480
12 Oct 2011, 5:47 AM
Please check that thread.
http://www.sencha.com/forum/showthread.php?102154-Drag-drop-sort-in-Touch&p=659116#post659116


Thanx for your example but i don't get it to work. Where should i place the code?

This is what is got, its inside a Panel:


items: [{
fullscreen: true,
cls:'sortablelist',
xtype: 'list',
store: beheerpaneel.stores.pages,
itemTpl: tpl,
onItemDisclosure: function (record) {
Ext.dispatch({
controller: beheerpaneel.controllers.Pages,
action: 'show',
id: record.getId()
});
},
draggable: true
}],