0

Fadeout on Drop Event

asked 2010-02-18 01:50:43 +0800

dhamu gravatar image dhamu
165 1 6

I would like to implement the fadeout effect on a listiem when I drop it to a specified target. Unfortunately, I can't seem to identify an event to attach this fadeout to which will give me the control that I need. Any suggestions?

delete flag offensive retag edit

14 Replies

Sort by ยป oldest newest

answered 2010-02-21 20:51:35 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

Are you using JavaScript?
Can you show me how did you do?

link publish delete flag offensive edit

answered 2010-02-22 01:29:13 +0800

dhamu gravatar image dhamu
165 1 6

Let me restate the question? What event can I use to attach a fadeout when I drop an item (any item). The problem is that the JQuery fade requires DHTML event to invoke Javascript directly. (Examples show w:onClick"jq(....)", where w: is the namespace reference for dhtml).

The challenge is that I need to use onDrop to trigger the fade (but this won't work because onDrop is a ZK event.

How can I drop and fade?

link publish delete flag offensive edit

answered 2010-02-22 14:39:39 +0800

dhamu gravatar image dhamu
165 1 6

Jumper,

I want to give you some additional information and I will also try to provide a minimal example for you to look at in a follow-up reply. I have two listboxes: "working_list" and "trash_list".

If I decide that there is an item in the "working_list" that I don't need any longer, I can decide to throw it into the "trash_list" using a drag and drop. I thought that it would be nice to use the ZK-integrated JQuery fade effect to allow the item to remain displayed (but dissolving) on the screen after it is dumped in the trash. However, the key is that I want to kick off a "detach()" call after the component dissolves so that I can actually remove the component from memory (in addition to dissolving it from a visual standpoint). I'm having two problems:

1) how to invoke a Client event at the time of the "onDrop"
2) how to kick off a server action to delete the component after the fade effect completes.

It is important not to detach and delete the component too soon, because it will pre-empt the fade effect, thus losing the nice behavior of fade-before-destroy. It all boils down to how to integrate Client and Server events.

Thank you for your consideration of this issue.

Dave

link publish delete flag offensive edit

answered 2010-02-22 16:39:07 +0800

dhamu gravatar image dhamu
165 1 6

Hi again!

I have created a minimal zul file:

Note, I have not referenced the jq(...) or client event with this. the purpose of this example is to show visually what the application should do:

1) Initially, the "source_list" listbox is populated with listitems.
2) Note that the listitems always remain in the source_list (I have implemented a mechanism to clone the listitem so that it is cloned before being dropped on the target). I also rename the id before the item is moved so that I don't get non-unique ids within the namespace.
3) when an item is dragged from the working_list to the trash, the item should fade and then after it fades, it should be detached/nulled out.
4) Since fade is a jq(...) Client activity and detach is a Server-side action, I'm not sure how to synchronize the fade and the detach so the item completes the fade action before it is detached. If I allow the detach to proceed without waiting for the fade to complete the fade effect is never observed, because the detach causes the item to disappear instantly.

<zk>
<hbox>
<zscript>
org.zkoss.zk.ui.AbstractComponent;

void moveFromSourcetoTarget(AbstractComponent comp, AbstractComponent dragged) {
if (dragged.getParent().getId().equals("source_list")) {
AbstractComponent clone = dragged.clone();
dragged.setId("orig_" + dragged.getId());
dragged.getParent().insertBefore(clone, dragged);
}
dragged.setParent(comp);
}
</zscript>
<listbox id="source_list" width="200px" rows="5">
<listhead>
<listheader label="Source Data" sort="auto"/>
</listhead>
<listitem draggable="A" id="field_1" label="field_1"/>
<listitem draggable="A" id="field_2" label="field_2"/>
<listitem draggable="A" id="field_3" label="field_3"/>
<listitem draggable="A" id="field_4" label="field_4"/>
<listitem draggable="A" id="field_5" label="field_5"/>
<listitem draggable="A" id="field_6" label="field_6"/>
<listitem draggable="A" id="field_7" label="field_7"/>
<listitem draggable="A" id="field_8" label="field_8"/>
<listitem draggable="A" id="field_9" label="field_9"/>
</listbox>

<listbox droppable="A" id="working_list" width="200px" rows="5" onDrop="moveFromSourcetoTarget(self, event.dragged)">
<listhead>
<listheader label="Working Data" sort="auto"/>
</listhead>
</listbox>

<listbox droppable="A" id="trash_list" width="200px" rows="1" onDrop="moveFromSourcetoTarget(self, event.dragged)">
<listhead>
<listheader label="Trash" sort="auto"/>
</listhead>
</listbox>

</hbox>
</zk>

link publish delete flag offensive edit

answered 2010-02-24 01:03:03 +0800

dhamu gravatar image dhamu
165 1 6

@Jumper,

Do you have any thoughts on this?

Thank you,

Dave

link publish delete flag offensive edit

answered 2010-02-24 03:45:15 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

Hi,

Try this example,

<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
	<hbox>
		<zscript>
org.zkoss.zk.ui.AbstractComponent;
	void moveFromSourcetoTarget(AbstractComponent comp,
			AbstractComponent dragged) {
		if (dragged.getParent().getId().equals("source_list")) {
			AbstractComponent clone = dragged.clone();
			dragged.setId("orig_" + dragged.getId());
		}
		dragged.setParent(comp);
		Thread.sleep(1500);
	}
</zscript>
<script>
function doAnima(event) {
	jq(event.data.dragged).fadeOut("slow");
}
</script>
		<listbox id="source_list" width="200px" rows="5">
			<listhead>
				<listheader label="Source Data" sort="auto" />
			</listhead>
			<listitem draggable="A" id="field_1" label="field_1" />
			<listitem draggable="A" id="field_2" label="field_2" />
			<listitem draggable="A" id="field_3" label="field_3" />
			<listitem draggable="A" id="field_4" label="field_4" />
			<listitem draggable="A" id="field_5" label="field_5" />
			<listitem draggable="A" id="field_6" label="field_6" />
			<listitem draggable="A" id="field_7" label="field_7" />
			<listitem draggable="A" id="field_8" label="field_8" />
			<listitem draggable="A" id="field_9" label="field_9" />
		</listbox>

		<listbox droppable="A" id="working_list" width="200px" rows="5"
			onDrop="moveFromSourcetoTarget(self, event.dragged)"
			w:onDrop='doAnima(event);'>
			<listhead>
				<listheader label="Working Data" sort="auto" />
			</listhead>
		</listbox>

		<listbox droppable="A" id="trash_list" width="200px" rows="1"
			onDrop="moveFromSourcetoTarget(self, event.dragged)">
			<listhead>
				<listheader label="Trash" sort="auto" />
			</listhead>
		</listbox>

	</hbox>
</zk>

I register an client side event of onDrop to the listbox, and then do an animation in JavaScript, but in server it should delay a time(Thread.sleep()) for the animation, because the dragged item will be removed after response.

link publish delete flag offensive edit

answered 2010-02-25 10:13:10 +0800

dhamu gravatar image dhamu
165 1 6

@jumperchen,

Thank you, but I've already tried this sort of example. The sequence of events in your example is not what I'm trying to accomplish.

What I want to do is:

1) Drop the text in the Trash (and see the text in that location)
2) Commence the Fade effect
3) When fade is complete then detach and destroy the object that was dropped in the trash.

I'm struggling with the concept of how to pass the control between the server-side and client-side actions. I'll tinker with it some more as you have given me some ideas, but I'm still not quite sure if this is possible.

link publish delete flag offensive edit

answered 2010-02-25 22:56:55 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

updated 2010-02-25 22:57:16 +0800

Hi,

You can remove the Thread.sleep() at Java, and then change the JavaScript with the following code.

<script>
function doAnima(event) {
jq(event.data.dragged).fadeOut("slow", function () {
zAu.send(event); // fire to server
});
event.stop();// stop to fire to server.
}
</script>

link publish delete flag offensive edit

answered 2010-02-26 09:46:57 +0800

dhamu gravatar image dhamu
165 1 6

@jumperchen,

Thank you for sticking with me on this. I guess I'm still not explaining myself thoroughly.

First of this is helpful to see how a client-side script can trigger a server side script, but that's not exactly what I'm trying to do.

I need to execute the logic in the following sequence:

1) dragged.setParent(trash_list);
2) doAnima(event);
3) dragged.detach();


Because of this, I need to understand how to coordinate between the 3 steps.

1) Server Side Action executes: dragged.setParent(); and then invokes the doAnima();
2) When doAnima executes, then I need to trigger a server-side execution to accomplish dragged.detach();

I'm not clear what the correct way to control this sort of interaction between client side and server side. I certainly do know how to call a Client execution from the server zscript. But how do I invoke a server side script from Javascript (client side)? Or is that the wrong way of looking at the problem?

Thank you,

Dave

link publish delete flag offensive edit

answered 2010-03-02 00:13:13 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

Hi,

I think you should have a customized component to do so, otherwise, you cannot avoid the original component life-cycle in your three steps.

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-18 01:50:43 +0800

Seen: 1,773 times

Last updated: Mar 04 '10

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