I ran into this issue too. My solution was to add an "onUpdate"
function to
the sortable that tests the container to see if it''s got any children
or
not:
function is_empty(container)
{
if ($(container).hasChildNodes()) {
Element.removeClassName($(container),''empty'');
} else if (!$(container).hasChildNodes()) {
Element.addClassName($(container),''empty'');
}
}
I was using this for 2 sortable (UL) lists - my class for the "empty"
sortable just padded the container:
.empty {
padding: 10px;
border: 1px dashed #FFDD44;
background-color: #FFFF99;
}
The padding and style was enough to give a visible "target" for the
users to
drop on.
- bry
> Does anyone have a good solution for using script.aculo.us
> drag and drop sorting with multiple lists when one or more of
> those lists might start out empty?
>
> I want to drop from list A to list B, but unless B starts out
> with something
> in it, there''s no drop target there. My guess is that I
> could put "None"
> in the empty lists and then write some javascript to remove
> the word "None"
> when something was dropped and add it back if the last item
> is removed. It just feels messy to me.
>
> Any thoughts/help is greatly appreciated.
As it turns out, if you give the list a height and width then you can drop
on it when it''s empty. You can do that with standard css, ala
ul.sortable-list {
width = 100px;
min-height = 50px;
}
Thank you for your response.
I think you also have to have the sortable''s dropOnEmpty parameter set
to
true.
There''s an example on the Scriptaculous site that has this working with
the
code.
On 3/31/06, Bryan Buchs <bryan-IP7csyUQqvaL7B8feK0ILA@public.gmane.org>
wrote:>
> I ran into this issue too. My solution was to add an "onUpdate"
function
> to
> the sortable that tests the container to see if it''s got any
children or
> not:
>
> function is_empty(container)
> {
> if ($(container).hasChildNodes()) {
>
Element.removeClassName($(container),''empty'');
> } else if (!$(container).hasChildNodes()) {
>
Element.addClassName($(container),''empty'');
> }
> }
>
> I was using this for 2 sortable (UL) lists - my class for the
"empty"
> sortable just padded the container:
>
> .empty {
> padding: 10px;
> border: 1px dashed #FFDD44;
> background-color: #FFFF99;
> }
>
> The padding and style was enough to give a visible "target" for
the users
> to
> drop on.
>
> - bry
>
>
> > Does anyone have a good solution for using script.aculo.us
> > drag and drop sorting with multiple lists when one or more of
> > those lists might start out empty?
> >
> > I want to drop from list A to list B, but unless B starts out
> > with something
> > in it, there''s no drop target there. My guess is that I
> > could put "None"
> > in the empty lists and then write some javascript to remove
> > the word "None"
> > when something was dropped and add it back if the last item
> > is removed. It just feels messy to me.
> >
> > Any thoughts/help is greatly appreciated.
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
whoops. that syntax is wrong obviously - i was doing it from memory width: 50px, etc. On 3/31/06, Larry White <ljw1001-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > As it turns out, if you give the list a height and width then you can drop > on it when it''s empty. You can do that with standard css, ala > > ul.sortable-list { > width = 100px; > min-height = 50px; > } > > Thank you for your response. > > I think you also have to have the sortable''s dropOnEmpty parameter set to > true. > > There''s an example on the Scriptaculous site that has this working with > the code. > > > On 3/31/06, Bryan Buchs <bryan-IP7csyUQqvaL7B8feK0ILA@public.gmane.org > wrote: > > > > I ran into this issue too. My solution was to add an "onUpdate" function > > to > > the sortable that tests the container to see if it''s got any children or > > not: > > > > function is_empty(container) > > { > > if ($(container).hasChildNodes()) { > > Element.removeClassName($(container),''empty''); > > } else if (!$(container).hasChildNodes()) { > > Element.addClassName($(container),''empty''); > > } > > } > > > > I was using this for 2 sortable (UL) lists - my class for the "empty" > > sortable just padded the container: > > > > .empty { > > padding: 10px; > > border: 1px dashed #FFDD44; > > background-color: #FFFF99; > > } > > > > The padding and style was enough to give a visible "target" for the > > users to > > drop on. > > > > - bry > > > > > > > Does anyone have a good solution for using script.aculo.us > > > drag and drop sorting with multiple lists when one or more of > > > those lists might start out empty? > > > > > > I want to drop from list A to list B, but unless B starts out > > > with something > > > in it, there''s no drop target there. My guess is that I > > > could put "None" > > > in the empty lists and then write some javascript to remove > > > the word "None" > > > when something was dropped and add it back if the last item > > > is removed. It just feels messy to me. > > > > > > Any thoughts/help is greatly appreciated. > > > > _______________________________________________ > > Rails-spinoffs mailing list > > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > >_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs