Using Struts2 JQuery drag & drop

View: New views
5 Messages — Rating Filter:   Alert me  

Using Struts2 JQuery drag & drop

by Ignacio de Córdoba :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hello,
I am looking at last version of Struts2 JQuery plugin and looks graet. Unfortunately I am really new to JQuery. I've been doing things with discontinued Dogo plugin but have found that the drag & drop tags in JQuery plugin could really fit for a Rich Int. App I have in mind. Hope somebody here can help me with a simple scenario.
I would need to drop a small image into a bigger image; as far as I've seen that's no problem. The problem is that example in the showcase just shows a simple javascript subscribing to the drop action. I would need to get the coords where the small image/div was dropped and execute a remote DIV (to a struts2 action) sending those coords as parameter so that the remote div shows the results some processing with that simple data.

Anybody could point me on how to:
A) Get the coords inside the big div where the small image was dropped.
B) How to set those x & y coords as a remote div action parameters.

Hope this is simple to achieve.

Thanks for any directions,
Ignacio

Re: Using Struts2 JQuery drag & drop

by Sparecreative :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hi Ignacio,

It not jQuery specific but more extracting the coordinates of the event
using javascript. Depending on what your doing you have six pairs to choose
from:

clientX,clientY
layerX,layerY
offsetX,offsetY
pageX,pageY
screenX,screenY
x,y

Without knowing exactly what you¹re doing, I can only really give you
general advice, but you could take the coordinates from the event and pass
them via ajax and then use the response as required.

I¹m apologise if I¹m being presumptuous but I suspect that you¹d really
benefit from a good book on both javascript and jQuery.

Z.


> Hello,
> I am looking at last version of Struts2 JQuery plugin and looks graet.
> Unfortunately I am really new to JQuery. I've been doing things with
> discontinued Dogo plugin but have found that the drag & drop tags in JQuery
> plugin could really fit for a Rich Int. App I have in mind. Hope somebody
> here can help me with a simple scenario.
> I would need to drop a small image into a bigger image; as far as I've seen
> that's no problem. The problem is that example in the showcase just shows a
> simple javascript subscribing to the drop action. I would need to get the
> coords where the small image/div was dropped and execute a remote DIV (to a
> struts2 action) sending those coords as parameter so that the remote div
> shows the results some processing with that simple data.
>
> Anybody could point me on how to:
> A) Get the coords inside the big div where the small image was dropped.
> B) How to set those x & y coords as a remote div action parameters.
>
> Hope this is simple to achieve.
>
> Thanks for any directions,
> Ignacio


Re: Using Struts2 JQuery drag & drop

by Ignacio de Córdoba :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hello Z.,
you are right. I am really new to JQuery & Javascript as I've just focused into server side programming. I'm not a javascript fan... I have to use it anyway.
I have already solved the coords. problem  in JQuery drag&drop. There seem to be many docs about it in the net. Anyway, I haven't solved the other important problem and is how to trigger a struts2 remote div from javascript. The JQuery drop listener is a javascript function. I have the available and need to invoke a sx:div (old method) or the new sj:div to process them and show the result in the same page ; Any example over there?

Thanks

I'll get that JQuery book :-)

Sparecreative wrote:
Hi Ignacio,

It not jQuery specific but more extracting the coordinates of the event
using javascript. Depending on what your doing you have six pairs to choose
from:

clientX,clientY
layerX,layerY
offsetX,offsetY
pageX,pageY
screenX,screenY
x,y

Without knowing exactly what you¹re doing, I can only really give you
general advice, but you could take the coordinates from the event and pass
them via ajax and then use the response as required.

I¹m apologise if I¹m being presumptuous but I suspect that you¹d really
benefit from a good book on both javascript and jQuery.

Z.


> Hello,
> I am looking at last version of Struts2 JQuery plugin and looks graet.
> Unfortunately I am really new to JQuery. I've been doing things with
> discontinued Dogo plugin but have found that the drag & drop tags in JQuery
> plugin could really fit for a Rich Int. App I have in mind. Hope somebody
> here can help me with a simple scenario.
> I would need to drop a small image into a bigger image; as far as I've seen
> that's no problem. The problem is that example in the showcase just shows a
> simple javascript subscribing to the drop action. I would need to get the
> coords where the small image/div was dropped and execute a remote DIV (to a
> struts2 action) sending those coords as parameter so that the remote div
> shows the results some processing with that simple data.
>
> Anybody could point me on how to:
> A) Get the coords inside the big div where the small image was dropped.
> B) How to set those x & y coords as a remote div action parameters.
>
> Hope this is simple to achieve.
>
> Thanks for any directions,
> Ignacio

Re: Using Struts2 JQuery drag & drop

by Sparecreative :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hey Ignacio,

I’m not a big fan of integrated ajax functionality. While it provides a
simple solution at first when you need something a little more complex or
customised it starts to show it’s limitations.

Rather than using the sx;div tag why not just use a plain div and then use a
jQuery ajax call, which can be triggered by your drag and drop event, to
retrieve the content from the server side. I suspect that you want to pass
your event coordinates to the server and display something appropriate.

I don’t use S2 ajax plugin as I’ve been burnt by it too often. So, somebody
else may be of more help on that front.

Z.

>
> Hello Z.,
> you are right. I am really new to JQuery & Javascript as I've just focused
> into server side programming. I'm not a javascript fan... I have to use it
> anyway.
> I have already solved the coords. problem  in JQuery drag&drop. There seem
> to be many docs about it in the net. Anyway, I haven't solved the other
> important problem and is how to trigger a struts2 remote div from
> javascript. The JQuery drop listener is a javascript function. I have the
> available and need to invoke a sx:div (old method) or the new sj:div to
> process them and show the result in the same page ; Any example over there?
>
> Thanks
>
> I'll get that JQuery book :-)
>
>
> Sparecreative wrote:
>> >
>> > Hi Ignacio,
>> >
>> > It not jQuery specific but more extracting the coordinates of the event
>> > using javascript. Depending on what your doing you have six pairs to
>> > choose
>> > from:
>> >
>> > clientX,clientY
>> > layerX,layerY
>> > offsetX,offsetY
>> > pageX,pageY
>> > screenX,screenY
>> > x,y
>> >
>> > Without knowing exactly what you¹re doing, I can only really give you
>> > general advice, but you could take the coordinates from the event and pass
>> > them via ajax and then use the response as required.
>> >
>> > I¹m apologise if I¹m being presumptuous but I suspect that you¹d really
>> > benefit from a good book on both javascript and jQuery.
>> >
>> > Z.
>> >
>> >
>>> >> Hello,
>>> >> I am looking at last version of Struts2 JQuery plugin and looks graet.
>>> >> Unfortunately I am really new to JQuery. I've been doing things with
>>> >> discontinued Dogo plugin but have found that the drag & drop tags in
>>> >> JQuery
>>> >> plugin could really fit for a Rich Int. App I have in mind. Hope somebody
>>> >> here can help me with a simple scenario.
>>> >> I would need to drop a small image into a bigger image; as far as I've
>>> >> seen
>>> >> that's no problem. The problem is that example in the showcase just shows
>>> >> a
>>> >> simple javascript subscribing to the drop action. I would need to get the
>>> >> coords where the small image/div was dropped and execute a remote DIV (to
>>> >> a
>>> >> struts2 action) sending those coords as parameter so that the remote div
>>> >> shows the results some processing with that simple data.
>>> >>
>>> >> Anybody could point me on how to:
>>> >> A) Get the coords inside the big div where the small image was dropped.
>>> >> B) How to set those x & y coords as a remote div action parameters.
>>> >>
>>> >> Hope this is simple to achieve.
>>> >>
>>> >> Thanks for any directions,
>>> >> Ignacio
>> >
>> >
>> >


Re: Using Struts2 JQuery drag & drop

by Ignacio de Córdoba :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hello,
I agree with your point of view, but sj: tags are a good start point to get introduced to JQuery. I'll look anyway at remote divs the jQuery "direct way"...

Thanks for your reply

Sparecreative wrote:
Hey Ignacio,

I’m not a big fan of integrated ajax functionality. While it provides a
simple solution at first when you need something a little more complex or
customised it starts to show it’s limitations.

Rather than using the sx;div tag why not just use a plain div and then use a
jQuery ajax call, which can be triggered by your drag and drop event, to
retrieve the content from the server side. I suspect that you want to pass
your event coordinates to the server and display something appropriate.

I don’t use S2 ajax plugin as I’ve been burnt by it too often. So, somebody
else may be of more help on that front.

Z.
>
> Hello Z.,
> you are right. I am really new to JQuery & Javascript as I've just focused
> into server side programming. I'm not a javascript fan... I have to use it
> anyway.
> I have already solved the coords. problem  in JQuery drag&drop. There seem
> to be many docs about it in the net. Anyway, I haven't solved the other
> important problem and is how to trigger a struts2 remote div from
> javascript. The JQuery drop listener is a javascript function. I have the
> available and need to invoke a sx:div (old method) or the new sj:div to
> process them and show the result in the same page ; Any example over there?
>
> Thanks
>
> I'll get that JQuery book :-)
>
>
> Sparecreative wrote:
>> >
>> > Hi Ignacio,
>> >
>> > It not jQuery specific but more extracting the coordinates of the event
>> > using javascript. Depending on what your doing you have six pairs to
>> > choose
>> > from:
>> >
>> > clientX,clientY
>> > layerX,layerY
>> > offsetX,offsetY
>> > pageX,pageY
>> > screenX,screenY
>> > x,y
>> >
>> > Without knowing exactly what you¹re doing, I can only really give you
>> > general advice, but you could take the coordinates from the event and pass
>> > them via ajax and then use the response as required.
>> >
>> > I¹m apologise if I¹m being presumptuous but I suspect that you¹d really
>> > benefit from a good book on both javascript and jQuery.
>> >
>> > Z.
>> >
>> >
>>> >> Hello,
>>> >> I am looking at last version of Struts2 JQuery plugin and looks graet.
>>> >> Unfortunately I am really new to JQuery. I've been doing things with
>>> >> discontinued Dogo plugin but have found that the drag & drop tags in
>>> >> JQuery
>>> >> plugin could really fit for a Rich Int. App I have in mind. Hope somebody
>>> >> here can help me with a simple scenario.
>>> >> I would need to drop a small image into a bigger image; as far as I've
>>> >> seen
>>> >> that's no problem. The problem is that example in the showcase just shows
>>> >> a
>>> >> simple javascript subscribing to the drop action. I would need to get the
>>> >> coords where the small image/div was dropped and execute a remote DIV (to
>>> >> a
>>> >> struts2 action) sending those coords as parameter so that the remote div
>>> >> shows the results some processing with that simple data.
>>> >>
>>> >> Anybody could point me on how to:
>>> >> A) Get the coords inside the big div where the small image was dropped.
>>> >> B) How to set those x & y coords as a remote div action parameters.
>>> >>
>>> >> Hope this is simple to achieve.
>>> >>
>>> >> Thanks for any directions,
>>> >> Ignacio
>> >
>> >
>> >