Listbox drag and drop

  1. Am I right in thinking that the Xojo IDE is implemented in Xojo? If so then the question is this. I have a hierarchical listbox and using the DragReorderRows event have managed to implement dragging rows around from one place to another in the listbox. My row, when dragged, is represented by a rectangle. But in the IDE, I notice that rows dragged are shown as ghostly images of the row itself. How can I get that behaviour in my app?

  2. In my listbox, if a folder is open, I can drag/drop a row into the open portion of that folder, and that works OK. However if the folder is closed I can’t do that. I’d like to be able to drag a row “onto” a folder and drop it, and perhaps I could do that with some other events such as DragRow and DropObject, but it seems to me that DragReorderRows would also fire when the row is dropped. How do I avoid this?

  1. Read:
    http://documentation.xojo.com/index.php/DragItem.DragPicture

Basically: create a new Picture using your Listbox width, height, and print there your Row (s). Then assign this Picture to your DragItem.DragPicture.
Tested. Very nice.
An example is available in the Examples folder.

  1. Think. How are you displaying the Folder contents ?
    In the code there, put what is needed to draw a Row you drag into the Folder (when the Folder is closed).
    Not tested.
  1. Thanks, that works nicely.

  2. Not sure I follow. When the user clicks on the disclosure triangle, I display the folder contents using the ExpandRow event. How do I drag “into” the folder when it’s closed?

Hi Tim.

2: I certainly misunderstand your question.

What I think was to place the data of the Row(s) you dropped into the Listbox closed “folder” somewhere (in some structure, Property, Class, whatever). When the user click in the Listbox disclosure triangle, you do as usual until the end, then take the data from where you previously store them and insert them into the currently open “folder”.

If the above is still unclear, I certainly really misunderstand your question. Sorry if this is the case.

@Tim: AFAIK you have to implement 2 yourself. Which is a great PITA because this means you also have to do 1 yourself because you have to differentiate between the drag-reorder and the drag-into.

Does anyone have code for this?

@emile: Thanks, now I see what you’re saying. Yes, I sort of knew I’d have to do the actions appropriate to my app once the row is dropped. I’d expect to make changes to an SQLite database that describes the Listbox contents, and then redraw the whole Listbox.

But as Beatrix I think is referring to - since I’m using the DragReorderRows event, I don’t want a second events going off which also wants to modify the database. I’ll check through the available events and see whether I can use a different one for both purposes.

You can’t use a different event. You want to do a drag reorder when you are between rows and drag into when you are over a row. That’s also the reason why you have to do everything yourself. You get the line for the drag reorder always, which isn’t what you want.

Hmmmm. As it happens, I’m in the process of converting my app from javascript/html/PHP to Xojo. I used an HTML table to implement what I’m now using a Listbox for, and in each HTML table row I had two parts. The first part had the stuff which now occupies the whole listbox row, but the second had a dropzone (with the line with ball on it which I get for free in a listbox).

So the line with ball on it, marking the dropzone, I had to implement myself in the HTML table, but it did at least mean I could distinguish between dropping on a row, and dropping between two rows. OTOH, item (1) in my OP came for free with HTML5 drag/drop, although it turned out to be easy enough to do in Xojo.

I suppose a possibility here might be to hover over an unexpanded row and maybe start a thread that could expand the row after, say, 250 msec, if the mouse pointer were still over the same row. I’d still have a problem with empty folders, though.