0

Drag and Drop and organizing dropped items

asked 2010-02-17 09:42:49 +0800

dhamu gravatar image dhamu
165 1 6

I actually have three questions relating to my drag and drop issue. I have not found any other discussion touching on these questions on the forum, so here goes:

1) I have a component that is droppable="true" but I only want to be able to drop one item. Ideally I want to change the droppable attribute to false when the first item is dropped. That appears easy enough to do, but then I want to change the droppable attribute back to true if the item is dragged to another target. I'm having some difficulty identifying the containing component when I drag an item off that component. Also, I don't know what will happen from an event standpoint if the drop fails on another target following the drag. This is important, because I may need to reset the droppable attributed back to false on the container component if the drag away from that component fails due to an invalid target or user releases the draggable component and it flies back home. Any idea how I might do this?

2) I have another component (either a list or a tree) which will contain several draggable items. I would actually like to clone the items when I drag rather than dragging the original item, I just don't know where to start. It is imperative that the look of this feature is seamless (I don't want to see two of the same item on the list just prior to the drag. Any idea how to do this?

3) In another scenario, I have a list that I can drag items from and drop to other targets. If I return the items to the original list at some point in time, I would like them to be restored to their original order in the list. Suggestions?

I have been reading through the drag and drop documentation and it's a bit sparse and I don't see the events defined that you would seem to need, but maybe I'm just misunderstanding. I have also been looking at the documentation for the individual controls that I am using and that doesn't seem to shed any light. It seems like a much more comprehensive discussion on drag and drop functionality is needed. I'll make a promise that I will post my examples when I am done so that others can see a complete solution with all of the dynamic behavior that I am envisioning.

TIA,

Dave

delete flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2010-02-17 17:17:52 +0800

dhamu gravatar image dhamu
165 1 6

Hi all, I have solved requirement #1 in my original post. I'm still interested in suggestions regarding #2 and #3.

Here's the solution:

I want to allow only one object to be dropped on a target. So, to prevent the second object from being dropped I set droppable="false". Later if the item is dragged away from the target, I want to set droppable back to "true". To do this I have a move function/method in zscript as follows:

void move(XulElement target, Event evt) {
XulElement source = evt.dragged.getParent();
System.out.println("Source object type: " + source.getClass().getName());
System.out.println("Target object type: " + target.getClass().getName());
if (source.getClass().getName().endsWith("Groupbox")) {
source.setDroppable("true");
}

if (target.getClass().getName().endsWith("Groupbox")) {
target.setDroppable("false");
}

target.appendChild(evt.dragged);
}

Note: I have two types of targets (which also can be sources for moves): one is a Groupbox and the other is a Vbox. A groupbox may only contain one item at a time. A Vbox can have as many as I want (it is the original object source for the items that I drop on the Groupboxes). So, I look at the source and the target of the drop operation as follows:

The source is: evt.dragged.getParent(), because the dragged item still recognizes it's original parent (prior to the drop)
The target is: self (which I pass in in this case just to make the code more readable and I give the name target to the self object).

So, the logic is as follows:

If the source is a Groupbox then set droppable="true", because the child has flown the coop.
If the target is a Groupbox then set droppable="false", because the groupbox has reached it's capacity of one child.

Obviously the logic here can be altered to suit whatever logic is desired. But this solution works for me.

Any ideas on questions #2 and #3 are greatly appreciated.

-Dave

link publish delete flag offensive edit

answered 2010-02-18 00:01:18 +0800

dhamu gravatar image dhamu
165 1 6

Wow! I addressed all of my issues. I implemented cloning and I also found a novel way to preserve the order of the original list of items (by placing the clone before the original item and then dragging the original item to the target).

It all seems to work quite well.

link publish delete flag offensive edit

answered 2010-02-18 21:32:55 +0800

samchuang gravatar image samchuang
4084 4

Hi

Thanks for sharing the drag and drop solution, it helps ~~

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-02-17 09:42:49 +0800

Seen: 318 times

Last updated: Feb 18 '10

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More