View Full Version : Draggable table item

10 Jun 2008, 5:54 AM
Please tell me someone has gotten the draggable function working for a table item (row) or a tree item. I have followed the example code that the developers gave for a draggable tree item (in the premium forum) but the entire tree drags (or table in my case) and I do not want that.

Using a drag listener, I can get the table item that is the target of the drag, but I cannot seem to move the item to a new position since the entire table is selected and not just the table item.

Anyone have suggestions for this?

10 Jun 2008, 3:49 PM
You dont want to drag the actual TableItem or TreeItem, you should use a proxy element with draggable.

11 Jun 2008, 6:26 AM

I am using a proxy.
I set the Draggable object's "useProxy" property to true, I set the "sizeProxyToSource" to true, and I set "moveAfterProxyDrag" to true.

The problem arises because the proxy sizes itself to the entire table and not the selected row (as I would like it to). I followed your example from the Premium forum. I am not certain what to write for the proxy in the "dragStart" method of a DragListener class because a lot of the code for selecting the target (sizing the proxy, etc) is already in the Draggable class (in its onMouseDown event handler and startDrag method, the proxy is set to the size of the table... if I try to change those properties in the "dragStart" method, nothing changes). See my code. I am certain others are having this problem, so I am hoping you'll be able to lead us in the right direction :) Thanks...


// draggable support

final Draggable d = new Draggable(table);
d.container = table;
d.useProxy = true;
d.sizeProxyToSource = true;
d.moveAfterProxyDrag = true;

final El el = new El("<div style='border: 1px solid #8DC0FF;width:100px;backgroundColor: #EAF3FF;'></div>");


d.addDragListener(new DragListener() {

private TableItem draggedRow = null;

publicvoid dragStart(DragEvent de) {

Element target = DOM.eventGetTarget(de.event);
draggedRow = (TableItem)table.findItem(target);

if(draggedRow != null){

// Select the table item

RowSelectionModel selModel = (RowSelectionModel)table.getSelectionModel();

el.setLeftTop(draggedRow.el().getX(), draggedRow.el().getY());