0

Drag and drop event

asked 2012-01-28 09:55:26 +0800

valmar gravatar image valmar
925 2 13
http://www.timo-ernst.net

Hey guys,

I'm looking for 2 event for drag and drop operations:

1. An event that gets fired when the D&D operation has started.
2. An event that gets called WHILE the user is dragging an item.

Are there such events in ZK? I've been searching for some time now but couldn't find anything.

delete flag offensive retag edit

13 Replies

Sort by ยป oldest newest

answered 2012-02-16 17:17:05 +0800

creata87 gravatar image creata87
197 2

..neata :p

did you find a solution? :) you ..wanna share it? :p
iulia

link publish delete flag offensive edit

answered 2012-02-17 08:12:28 +0800

valmar gravatar image valmar
925 2 13
http://www.timo-ernst.net

Nope, no solution yet.
Only thing I could think of is to use JavaScript's onMouseOver event and then fire an event manually to the server.

link publish delete flag offensive edit

answered 2012-02-17 11:23:17 +0800

creata87 gravatar image creata87
197 2

updated 2012-02-17 13:05:55 +0800

..neata :p

zk provides the possibility to override the following getDragOptions_ function in order to give more specific behaviour for the dragging effect. here you have it for start drag and stop drag.

a question though. how can the drag event be generalized? for a listbox with draggable listitems, how can the onDrag event be generalized and not specific on $label_test?

<zk>
	<style>
		.label16-black-bold.z-label { background: transparent;
		font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
		color: #000000; font-size: 16px; font-weight: bold; }
	</style>
	<script type="text/javascript">
               <![CDATA[ zk.afterLoad("zul.wgt", function () {
		    
		zul.wgt.Label.prototype.getDragOptions_ = function (map) {
		    $widget = zk.Widget.$(this);
		    map.starteffect = function (dg) {
				zAu.send(new zk.Event($widget, 'onStartDrag', null));
			}
		    map.endeffect = function (dg) {
				zAu.send(new zk.Event($widget, 'onStopDrag', null));
			}
		return map; }

		}); ]]>		
	</script>

	<div apply="TestDragController">
		<label id="label_test" value="Test label" draggable="true"
			sclass="label16-black-bold" ></label>
	</div>
</zk>

and the TestDragController.java

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;

public class TestDragController extends GenericForwardComposer {

    public void onStartDrag$label_test(Event event) {
        System.out.println("Dragging started!");
    }

    public void onStopDrag$label_test(Event event) {
        System.out.println("Dragging stoped");
    }
}

link publish delete flag offensive edit

answered 2012-02-18 11:20:38 +0800

valmar gravatar image valmar
925 2 13
http://www.timo-ernst.net

Hm, did you test that code?
For me, it looks like if this line applies to ALL labels, so it is already generalized and not id-specific:

zul.wgt.Label.prototype.getDragOptions_ = ....

link publish delete flag offensive edit

answered 2012-02-18 19:13:28 +0800

creata87 gravatar image creata87
197 2

updated 2012-02-20 14:50:13 +0800

..you are right. it is general in the javascript code but it is specific in the controller on the label_test id

onStartDrag$label_test

link publish delete flag offensive edit

answered 2012-02-21 12:56:14 +0800

creata87 gravatar image creata87
197 2

updated 2012-02-21 12:57:23 +0800

..neata :p

found it! the specific call is made by the $widget in the javascript

zAu.send(new zk.Event($widget, 'onStartDrag', null));

replace it with $widget.parent that references the div, so that the function in the controller will simply be generalized for all labels :)
public void onStartDrag(Event event) {
    System.out.println("Dragging started!");
}

link publish delete flag offensive edit

answered 2012-02-21 13:32:03 +0800

creata87 gravatar image creata87
197 2

updated 2012-02-21 13:32:32 +0800

ps: here are the widget packages if you wanna use panel (in zul.wnd) instead of label (in zul.wgt) for example, or any other zk components

have fun with it
iulia

link publish delete flag offensive edit

answered 2012-02-21 15:30:28 +0800

valmar gravatar image valmar
925 2 13
http://www.timo-ernst.net

Nice,
but what's "neata"? :-)

link publish delete flag offensive edit

answered 2012-02-21 17:26:56 +0800

creata87 gravatar image creata87
197 2

updated 2012-02-21 19:47:11 +0800

..neata means morning in romanian :)

by the way, $widget.desktop has a better coverage than $widget.parent. i'd recommend to use desktop instead

but desktop does not work when include is involved. does anyone know how can the original desktop of the include component be retrieved?

link publish delete flag offensive edit

answered 2012-02-22 08:07:16 +0800

valmar gravatar image valmar
925 2 13
http://www.timo-ernst.net

Neata,

what do you mean by "include"?

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: 2012-01-28 09:55:26 +0800

Seen: 462 times

Last updated: Aug 06 '12

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