You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Chris Mylonas <ch...@opencsta.org> on 2012/04/12 06:21:09 UTC
Which zone got the drop in this drag and drop scenario (multi drop zones)
Hi Tapestry Users,
I've been fiddling with tapestry5-jquery with a large amount of success,
increasing my tapestry skills on the way.
I'm using the http://tapestry5-jquery.com/components/docsdraggable drag
and drop stuff.
I have two drop zones in a page now. I'd like to know which zone got the
dropped draggable component.
Here is my java and tml.
All you need to do is fix your maven repo stuff as per the usage on that
page to get this example to work.
Hope someone can help me :)
Cheers
Chris
################
java
################
import java.util.Date;
import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.annotations.OnEvent;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.Zone;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.got5.tapestry5.jquery.JQueryEventConstants;
public class Draggable5 {
@Property
private Draggable draggableItem1;
@Property
private Draggable draggableItem2;
@Property
private Zone dropZone1 ;
@Property
private Zone dropZone2 ;
private String thedata;
@Inject
private ComponentResources resources ;
public String getData(){
return thedata;
}
public Date getNow() {
return new Date();
}
//THIS WORKS!
@OnEvent(value = JQueryEventConstants.DROP)
void chris(Object[] context){
String contextString = (String)context[0];
setThedata(contextString + " dropped on ...");
}
public String getThedata() {
return thedata;
}
public void setThedata(String thedata) {
this.thedata = thedata;
}
}
#################
tml
#################
<html t:type="layout" title="Contact org.opencsta"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd" xmlns:p=
"tapestry:parameter">
<p>JQuery Testing</p>
<t:jquery.Draggable t:id="draggableItem1"
t:draggablecontext="literal:contexteItem1">Drag Me Context 1
</t:jquery.Draggable>
<br />
<br />
<br />
<t:jquery.Draggable t:id="draggableItem2"
t:draggablecontext="literal:contexteItem2">Drag Me Context 2
</t:jquery.Draggable>
<br />
<br />
<br />
<div t:type='zone' t:id="dropzone1" t:mixins='jquery/zonedroppable'>
Dropzone 1
<br />
Last zone Update:${now}
<br />
Last Drop:${data}
</div>
<br />
<br />
<br />
<div t:type='zone' t:id="dropzone2" t:mixins='jquery/zonedroppable'>
Dropzone 2
<br />
Last zone Update:${now}
<br />
Last Drop:${data}
</div>
</html>
Re: Which zone got the drop in this drag and drop scenario (multi drop zones)
Posted by Chris Mylonas <ch...@opencsta.org>.
Thanks Francois - that was simple.
My syntax was not quite like that and frustration got the better of me.
I'm also trying to create 5 of these drop zones, or 20 of them - dynamically - i.e. add a drop zone on the fly. Probably by some custom component stuff down the track - but for a hard coded proof of concept - this is great!!
Thanks once again - this will get me through til the weekend
Cheers
Chris
On 12/04/2012, at 10:27 PM, François Facon wrote:
> Hi Chris,
>
> Did you try to replace your
>
> @OnEvent(value = JQueryEventConstants.DROP)
> void chris(Object[] context){
> String contextString = (String)context[0];
> setThedata(contextString + " dropped on ...");
> }
>
> by
>
> @OnEvent(value = JQueryEventConstants.DROP,component="dropzone1")
> void dropOnZone1(Object[] context){
> String contextString = (String)context[0];
> setThedata(contextString + " dropped on ...");
> }
>
> @OnEvent(value = JQueryEventConstants.DROP,component="dropzone2")
> void dropOnZone2(Object[] context){
> String contextString = (String)context[0];
> setThedata(contextString + " dropped on zone2");
> }
>
> Regards
> François
>
> 2012/4/12 Chris Mylonas <ch...@opencsta.org>:
>> Hi Tapestry Users,
>>
>> I've been fiddling with tapestry5-jquery with a large amount of success,
>> increasing my tapestry skills on the way.
>> I'm using the http://tapestry5-jquery.com/components/docsdraggable drag
>> and drop stuff.
>>
>> I have two drop zones in a page now. I'd like to know which zone got the
>> dropped draggable component.
>>
>> Here is my java and tml.
>>
>> All you need to do is fix your maven repo stuff as per the usage on that
>> page to get this example to work.
>> Hope someone can help me :)
>>
>> Cheers
>> Chris
>>
>> ################
>> java
>> ################
>>
>>
>> import java.util.Date;
>>
>> import org.apache.tapestry5.ComponentResources;
>> import org.apache.tapestry5.annotations.OnEvent;
>> import org.apache.tapestry5.annotations.Property;
>> import org.apache.tapestry5.corelib.components.Zone;
>> import org.apache.tapestry5.ioc.annotations.Inject;
>> import org.got5.tapestry5.jquery.JQueryEventConstants;
>>
>> public class Draggable5 {
>> @Property
>> private Draggable draggableItem1;
>>
>> @Property
>> private Draggable draggableItem2;
>> @Property
>> private Zone dropZone1 ;
>> @Property
>> private Zone dropZone2 ;
>> private String thedata;
>> @Inject
>> private ComponentResources resources ;
>> public String getData(){
>> return thedata;
>> }
>> public Date getNow() {
>> return new Date();
>> }
>>
>> //THIS WORKS!
>> @OnEvent(value = JQueryEventConstants.DROP)
>> void chris(Object[] context){
>> String contextString = (String)context[0];
>> setThedata(contextString + " dropped on ...");
>> }
>>
>> public String getThedata() {
>> return thedata;
>> }
>>
>> public void setThedata(String thedata) {
>> this.thedata = thedata;
>> }
>> }
>>
>> #################
>> tml
>> #################
>>
>> <html t:type="layout" title="Contact org.opencsta"
>>
>> xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd" xmlns:p=
>> "tapestry:parameter">
>>
>>
>> <p>JQuery Testing</p>
>>
>>
>> <t:jquery.Draggable t:id="draggableItem1"
>>
>> t:draggablecontext="literal:contexteItem1">Drag Me Context 1
>>
>> </t:jquery.Draggable>
>>
>> <br />
>>
>> <br />
>>
>> <br />
>>
>> <t:jquery.Draggable t:id="draggableItem2"
>>
>> t:draggablecontext="literal:contexteItem2">Drag Me Context 2
>>
>> </t:jquery.Draggable>
>>
>> <br />
>>
>> <br />
>>
>> <br />
>>
>>
>> <div t:type='zone' t:id="dropzone1" t:mixins='jquery/zonedroppable'>
>>
>> Dropzone 1
>>
>> <br />
>>
>> Last zone Update:${now}
>>
>> <br />
>>
>> Last Drop:${data}
>>
>> </div>
>>
>> <br />
>>
>> <br />
>>
>> <br />
>>
>> <div t:type='zone' t:id="dropzone2" t:mixins='jquery/zonedroppable'>
>>
>> Dropzone 2
>>
>> <br />
>>
>> Last zone Update:${now}
>>
>> <br />
>>
>> Last Drop:${data}
>>
>> </div>
>>
>> </html>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Which zone got the drop in this drag and drop scenario (multi
drop zones)
Posted by François Facon <fr...@atos.net>.
Hi Chris,
Did you try to replace your
@OnEvent(value = JQueryEventConstants.DROP)
void chris(Object[] context){
String contextString = (String)context[0];
setThedata(contextString + " dropped on ...");
}
by
@OnEvent(value = JQueryEventConstants.DROP,component="dropzone1")
void dropOnZone1(Object[] context){
String contextString = (String)context[0];
setThedata(contextString + " dropped on ...");
}
@OnEvent(value = JQueryEventConstants.DROP,component="dropzone2")
void dropOnZone2(Object[] context){
String contextString = (String)context[0];
setThedata(contextString + " dropped on zone2");
}
Regards
François
2012/4/12 Chris Mylonas <ch...@opencsta.org>:
> Hi Tapestry Users,
>
> I've been fiddling with tapestry5-jquery with a large amount of success,
> increasing my tapestry skills on the way.
> I'm using the http://tapestry5-jquery.com/components/docsdraggable drag
> and drop stuff.
>
> I have two drop zones in a page now. I'd like to know which zone got the
> dropped draggable component.
>
> Here is my java and tml.
>
> All you need to do is fix your maven repo stuff as per the usage on that
> page to get this example to work.
> Hope someone can help me :)
>
> Cheers
> Chris
>
> ################
> java
> ################
>
>
> import java.util.Date;
>
> import org.apache.tapestry5.ComponentResources;
> import org.apache.tapestry5.annotations.OnEvent;
> import org.apache.tapestry5.annotations.Property;
> import org.apache.tapestry5.corelib.components.Zone;
> import org.apache.tapestry5.ioc.annotations.Inject;
> import org.got5.tapestry5.jquery.JQueryEventConstants;
>
> public class Draggable5 {
> @Property
> private Draggable draggableItem1;
>
> @Property
> private Draggable draggableItem2;
> @Property
> private Zone dropZone1 ;
> @Property
> private Zone dropZone2 ;
> private String thedata;
> @Inject
> private ComponentResources resources ;
> public String getData(){
> return thedata;
> }
> public Date getNow() {
> return new Date();
> }
>
> //THIS WORKS!
> @OnEvent(value = JQueryEventConstants.DROP)
> void chris(Object[] context){
> String contextString = (String)context[0];
> setThedata(contextString + " dropped on ...");
> }
>
> public String getThedata() {
> return thedata;
> }
>
> public void setThedata(String thedata) {
> this.thedata = thedata;
> }
> }
>
> #################
> tml
> #################
>
> <html t:type="layout" title="Contact org.opencsta"
>
> xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd" xmlns:p=
> "tapestry:parameter">
>
>
> <p>JQuery Testing</p>
>
>
> <t:jquery.Draggable t:id="draggableItem1"
>
> t:draggablecontext="literal:contexteItem1">Drag Me Context 1
>
> </t:jquery.Draggable>
>
> <br />
>
> <br />
>
> <br />
>
> <t:jquery.Draggable t:id="draggableItem2"
>
> t:draggablecontext="literal:contexteItem2">Drag Me Context 2
>
> </t:jquery.Draggable>
>
> <br />
>
> <br />
>
> <br />
>
>
> <div t:type='zone' t:id="dropzone1" t:mixins='jquery/zonedroppable'>
>
> Dropzone 1
>
> <br />
>
> Last zone Update:${now}
>
> <br />
>
> Last Drop:${data}
>
> </div>
>
> <br />
>
> <br />
>
> <br />
>
> <div t:type='zone' t:id="dropzone2" t:mixins='jquery/zonedroppable'>
>
> Dropzone 2
>
> <br />
>
> Last zone Update:${now}
>
> <br />
>
> Last Drop:${data}
>
> </div>
>
> </html>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org