Smalltalk › Frameworks & Tools › Seaside › Seaside General

Drag and drop: how do you nest it?

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

8 messages Options

Jeremy Shute

Drag and drop: how do you nest it?

Hi,

I have a widget that presents an OrderedCollection of other widgets, allowing you to reorder it. I have attached a file-out of this particular class. I would be happy if it made it into Seaside. :-) (How does one go about getting write access to Monticello, anyway? Is there a code review process? Approval process?)

I have discovered that when I have a reorderable list with an element that presents another reorderable list, like so:

1. A big item 1.
1. A little item 1.
1. A little item 2.
2. A big item 2.

...the little items are reorderable, and mousedown behavior on the big items just causes what looks like a selection of the entire "box" in which the big items are contained. This is observed in Firefox 1.5 .

Is this a bug in Seaside, or Scriptaculous, or am I doing something wrong? Has anyone else had success implementing the effect I'm looking for?

Jeremy
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

WAReorderableList.st (2K) Download Attachment

Lukas Renggli

Re: Drag and drop: how do you nest it?

> I have a widget that presents an OrderedCollection of other widgets,
> allowing you to reorder it. I have attached a file-out of this particular
> class. I would be happy if it made it into Seaside. :-) (How does one go
> about getting write access to Monticello, anyway? Is there a code review
> process? Approval process?)

You can just commit to SqueakSource, register an account and publish
your changes. The review process happens more or less automatically,
this is one thing that works very well in the Seaside project. Changes
or submissions being questionable simply don't get merged with the
latest version right away, Monticello makes it really easy to do this
any time later on.

> I have discovered that when I have a reorderable list with an element that
> presents another reorderable list, like so:
>
> 1. A big item 1.
> 1. A little item 1.
> 1. A little item 2.
> 2. A big item 2.
>
> ...the little items are reorderable, and mousedown behavior on the big items
> just causes what looks like a selection of the entire "box" in which the big
> items are contained. This is observed in Firefox 1.5 .

Please read the last chapter 'Beware of Nested Droppables' in the
script.aculo.us documentation:
<http://wiki.script.aculo.us/scriptaculous/show/Droppables.add>

> Is this a bug in Seaside, or Scriptaculous, or am I doing something wrong?
> Has anyone else had success implementing the effect I'm looking for?

It is neither a bug in Seaside nor Scriptaculous, it is the JavaScript
of script.aculo.us. What I found was that draggables, droppables, and
especially sortables do not work reliable if being nested. So it is
best to avoid nesting altogether or write your own JavaScript code
that can handle nesting properly.

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Lukas Renggli

Re: Drag and drop: how do you nest it?

In reply to this post by Jeremy Shute

> I have a widget that presents an OrderedCollection of other widgets,
> allowing you to reorder it. I have attached a file-out of this particular
> class. I would be happy if it made it into Seaside. :-)

I had a quick look at your code. Some comments:

- there is a reference to an unknown class JJSMessages
- the class uses the Seaside namespace, but depends on external
functionality from Scriptaculous
- if this is a widget then it should be pluggable, so that I am not
necessarily forced to subclass
- it would be good to have an example on the class-side, I don't
really understand how to use it

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Jeremy Shute

Re: Drag and drop: how do you nest it?

I'm sorry, the referenced class is an object containing class-side string constants (a habit that allows me to do crude internationalization fairly quickly). You're right in that it should be called SUReorderableList. You're right in that the component should be pluggable. You're right in that it should at LEAST come bundled with a test, ala the other Seaside stuff...

Now, another quick question. If I can't have nested D&D, I thought to myself, "I'll use the lightbox"!

But the dark overlayed background doesn't fit to all 4 edges of the browser window. Instead of masking off the whole screen, the upper-left corner of the dark layer fits to the upper-left hand corner of the first draggable item in my list (the <li>'s content, not the number the browser renders to the left of it.) Looking at...

SULightbox>>script

...it appears that the lightbox DOES have an understanding of the window boundaries, so I must be doing something wrong. While you're dishing out heaping helpings of useful knowledge, do you know where I should be looking? :-)

Jeremy

On 11/29/06, Lukas Renggli <[hidden email]> wrote:

> I have a widget that presents an OrderedCollection of other widgets,
> allowing you to reorder it. I have attached a file-out of this particular
> class. I would be happy if it made it into Seaside. :-)

I had a quick look at your code. Some comments:

- there is a reference to an unknown class JJSMessages
- the class uses the Seaside namespace, but depends on external
functionality from Scriptaculous
- if this is a widget then it should be pluggable, so that I am not
necessarily forced to subclass
- it would be good to have an example on the class-side, I don't
really understand how to use it

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Jeremy Shute

Re: Drag and drop: how do you nest it?

Hmmm, maybe the two occurrences of:

element.style.position = "absolute"

...in SULightbox>>script, should instead read...

element.style.position = "fixed"

???

That gets rid of the positioning problems. However, the D&D event is propogating right through the background layer, even though the links are all non-operational. Is that a z-index problem?

Jeremy

On 11/29/06, Jeremy Shute <[hidden email]> wrote:

I'm sorry, the referenced class is an object containing class-side string constants (a habit that allows me to do crude internationalization fairly quickly). You're right in that it should be called SUReorderableList. You're right in that the component should be pluggable. You're right in that it should at LEAST come bundled with a test, ala the other Seaside stuff...

Now, another quick question. If I can't have nested D&D, I thought to myself, "I'll use the lightbox"!

But the dark overlayed background doesn't fit to all 4 edges of the browser window. Instead of masking off the whole screen, the upper-left corner of the dark layer fits to the upper-left hand corner of the first draggable item in my list (the <li>'s content, not the number the browser renders to the left of it.) Looking at...

SULightbox>>script

...it appears that the lightbox DOES have an understanding of the window boundaries, so I must be doing something wrong. While you're dishing out heaping helpings of useful knowledge, do you know where I should be looking? :-)

Jeremy

On 11/29/06, Lukas Renggli <[hidden email]> wrote:
> I have a widget that presents an OrderedCollection of other widgets,
> allowing you to reorder it. I have attached a file-out of this particular
> class. I would be happy if it made it into Seaside. :-)

I had a quick look at your code. Some comments:

- there is a reference to an unknown class JJSMessages
- the class uses the Seaside namespace, but depends on external
functionality from Scriptaculous
- if this is a widget then it should be pluggable, so that I am not
necessarily forced to subclass
- it would be good to have an example on the class-side, I don't
really understand how to use it

Cheers,
Lukas

--
Lukas Renggli
<a href="http://www.lukas-renggli.ch" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
<a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Lukas Renggli

Re: Re: Drag and drop: how do you nest it?

In reply to this post by Jeremy Shute

> Now, another quick question. If I can't have nested D&D, I thought to
> myself, "I'll use the lightbox"!

I don't say you can't, I just say it is very tricky :-)

> But the dark overlayed background doesn't fit to all 4 edges of the browser
> window. Instead of masking off the whole screen, the upper-left corner of
> the dark layer fits to the upper-left hand corner of the first draggable
> item in my list (the <li>'s content, not the number the browser renders to
> the left of it.) Looking at...

Do the send to #lightbox: on your root component, instead of a child
component. The problem is that it doesn't work if a parent node is
positioned absolute (aka used for drag & drop) as well.

> Hmmm, maybe the two occurrences of:
>
> element.style.position = "absolute"
>
> ...in SULightbox>>script, should instead read...
>
> element.style.position = "fixed"

Yes, that would be cleaner, however IE6 does not understand fixed.

> That gets rid of the positioning problems. However, the D&D event
> is propogating right through the background layer, even though the
> links are all non-operational. Is that a z-index problem?

No, it is the way that script.aculo.us (the JavaScript part) handles
drag & drop: It has no notion of layers, it just calculates the
overlap of the dragged element with all droppables.

The solution would be that you do not enable the drag&drop for
elements behind the light-box and/or give them a different
containment-class, so that dragging from one list to the other is
restricted.

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Jeremy Shute

Re: Re: Drag and drop: how do you nest it?

The solution would be that you do not enable the drag&drop for
elements behind the light-box and/or give them a different
containment-class,

Thank you. You probably just saved me a day of mucking around needlessly. :-)

I'll attempt to redraw the controls with an updater, turning off D&D.

Jeremy

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Jeremy Shute

Re: Re: Drag and drop: how do you nest it?

I wanted to follow up on this. Once rendering the lightbox by sending #lightbox: to the root component, the issue of being able to drag and drop through the overlay actually went away. So this is not a problem, after all!

The lightbox works splendidly for my needs, thanks for the help.

Jeremy

On 11/30/06, Jeremy Shute <[hidden email]> wrote:

The solution would be that you do not enable the drag&drop for
elements behind the light-box and/or give them a different
containment-class,

Thank you. You probably just saved me a day of mucking around needlessly. :-)

I'll attempt to redraw the controls with an updater, turning off D&D.

Jeremy

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside