PDA

View Full Version : Draggable items between two lists



kortovos
22 Feb 2011, 2:57 AM
I am currently working on a panel that contains two lists. The right list contains a number of images, and the left list contains items to which the images can be assigned. So in short, the idea is that an item from the right list can be dragged to, and dropped onto, an item of the left list. But the problem is that when I try to drag an listitem out of the list, it becomes invisible (only the portion inside the list is visible). Does anyone have any idea's how to remedy this, or any other advice on how to improve my code?


inspection.page13 = new Ext.Panel({
layout:{
type:'hbox',
align: 'stretch',
pack:'center'
},
id:'inspection.page13',
listeners:{
beforeshow:function(){
...
}
},
scroll:'vertical',
fullscreen: true,

items: [{
items:[{
align: 'center',
xtype: 'list',
emptyText: ubenchlang.getText('present'),
pinHeaders: true,
deferEmptyText: true,
cls:'checkpointList',
id:'page13.categoryList',
listeners:{
selectionchange:function(model, records){
if(records.length > 0){
var record = records[0];
inspection.pictureStore.filtering(record.get('damage_id'));
}else{
inspection.pictureStore.filtering(-1,null);
}
},
afterrender:function(comp){
var nodes = comp.getNodes();
for(i = 0; i < nodes.length;i++){
new Ext.util.Droppable(nodes[i], {
group: 'valid',
validDropMode: 'intersect',
listeners: {
drop: function(droppable, draggable, e) {
}
}
});
}
}
},

loadingText : ubenchlang.getText('loading'),
store: inspection.categoryPictureStore,
itemTpl : '<tpl for="."><img src="{image}" width="150" height="100"/><br />{name}</tpl>',
singleSelect: true,
grouped: true,
indexBar: false
}]
},{
xtype:'button',
text:'add',
height: 50,
handler:function(){
var category = Ext.getCmp('page13.categoryList').getSelectedRecords();
var pictures = Ext.getCmp('page13.pictureList').getSelectedRecords();
if(category.length > 0 && pictures.length > 0){
inspection.pictureStore.setPictures(category[0], pictures);
}
}
},{
xtype:'button',
text:'remove',
height: 50,
handler:function(){
var category = Ext.getCmp('page13.categoryList').getSelectedRecords();
var pictures = Ext.getCmp('page13.pictureList').getSelectedRecords();
if(category.length > 0 && pictures.length > 0){
inspection.pictureStore.removePictures(category[0], pictures);
}
}
},{
items:[{
pinHeaders: true,
id:'page13.pictureList',
deferEmptyText: true,
xtype: 'list',
align: 'center',
singleSelect : true,
emptyText: ubenchlang.getSentence(['not','present'], false),
listeners:{
itemswipe:function(comp, index, item, event){
var style = item.getAttribute("class");
if(style.indexOf('x-draggable') == -1){
var l = new Ext.util.Draggable(item,{
id:item.id + '-draggable',
group:'valid',
revert:true,
constrain:'inspection.page13',
listeners:{
dragstart:function(a,b,c,d){
},
dragend:function(){
}
}
});
}

}
},
loadingText : ubenchlang.getText('loading'),
store: inspection.pictureStore,
itemTpl : '<tpl for="."><img width="200px" src="data:image/png;base64,{data}" /><br /><h5>{name}</h5></tpl>',
cls:'checkpointList',
singleSelect: true,
grouped: true,
indexBar: false
}]
}
]
});

kortovos
23 Feb 2011, 12:15 AM
Okay, I have managed to be able to drag items from the right list and drop them unto items of the left list, but I still cannot display the list item from the right list outside the list (while dragging).

I am thinking along the lines of creating a temporary clone of the listitem while it is being dragged. But if anyone has a better idea, I would appreciate it.

gcallaghan
23 Feb 2011, 10:27 AM
Thats they way I would do it. I would create a cloned temporary list item that can float between the 2 when dragged.

shuchia
11 Mar 2011, 11:19 AM
HI I am trying to add items to an empty list by dragging and dropping them from one liot to another empty list,I also have the same issue of not able to see the item outside the list. What is the solution for this?