I have a page with about 5 divs, with some random content, underneath each-other. Now I want to enable the user to be able to sort these divs, but without drag-and-drop. (this interferes with flash-video player) Is there a way to accomplish this with "classic" up and down buttons and mootools? Thanx! --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Not sure about Moo, but in Prototype (which is what this list is
about) you could accomplish the moving part simply with this sort of
construction:
<div>
<!-- outer div, necessary for the following to work -->
<div id="thing_1" class="sort"><a
class="up" href="#">Up</a> <a
class="down" href="#">Down</a> (nasty bit of
flash)</div>
... repeat as above, with unique IDs ...
</div>
$$(''div.sort'').each(function(elm){
elm.observe(''click'',function(evt){
var t = Event.element(evt);
if(t.hasClassName(''up'') &&
this.previous(''div''))
this.previous(''div'').insert({before: this.remove()});
if(t.hasClassName(''down'') &&
this.next(''div''))
this.next(''div'').insert({after: this.remove()});
})
});
Now all this does is move things around on the screen. In order to
get the order of things back to your server, you need to look into
the magic that happens in Sortable.serialize() in Scriptaculous. You
would need to look through your collection of sortable things, read
the IDs into an array, and then send that array back to your server
for storage. Or whatever else you might do with that array. You could
either do this after every move, or after a visitor clicks a "done
sorting" control.
And there''s probably a much more concise way of writing this, but I
hope I''m erring on the side of understandability.
$$ selects and returns an array of document elements that match a CSS
rule.
Each element of the array is then assigned a click observer, using
the each construction.
Each click observer further looks inside the click event to discover
which (direction) control was clicked, and then the object itself is
removed and then re-inserted above or below its next neighbor, as
long as that move is possible.
Note that this requires Prototype 1.6.x for the ''insert'' and
''this''
magic. It could be done in 1.5.1, but would need to be written
slightly differently.
Walter
On Feb 20, 2008, at 3:56 AM, Marco de Jong wrote:
>
> I have a page with about 5 divs, with some random content, underneath
> each-other.
>
> Now I want to enable the user to be able to sort these divs, but
> without drag-and-drop.
> (this interferes with flash-video player)
>
> Is there a way to accomplish this with "classic" up and down
buttons
> and mootools?
>
> Thanx!
>
> >
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
I wrote Mootoosl, but I meant Scriptaculous. Anyway.. I will try the solutions you mentioned. Thank you so much! On Feb 20, 4:06 pm, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote:> Not sure about Moo, but in Prototype (which is what this list is > about) you could accomplish the moving part simply with this sort of > construction: > > <div> > <!-- outer div, necessary for the following to work --> > <div id="thing_1" class="sort"><a class="up" href="#">Up</a> <a > class="down" href="#">Down</a> (nasty bit of flash)</div> > > ... repeat as above, with unique IDs ... > > </div> > > $$(''div.sort'').each(function(elm){ > elm.observe(''click'',function(evt){ > var t = Event.element(evt); > if(t.hasClassName(''up'') && this.previous(''div'')) > this.previous(''div'').insert({before: this.remove()}); > if(t.hasClassName(''down'') && this.next(''div'')) > this.next(''div'').insert({after: this.remove()}); > }) > > }); > > Now all this does is move things around on the screen. In order to > get the order of things back to your server, you need to look into > the magic that happens in Sortable.serialize() in Scriptaculous. You > would need to look through your collection of sortable things, read > the IDs into an array, and then send that array back to your server > for storage. Or whatever else you might do with that array. You could > either do this after every move, or after a visitor clicks a "done > sorting" control. > > And there''s probably a much more concise way of writing this, but I > hope I''m erring on the side of understandability. > > $$ selects and returns an array of document elements that match a CSS > rule. > > Each element of the array is then assigned a click observer, using > the each construction. > > Each click observer further looks inside the click event to discover > which (direction) control was clicked, and then the object itself is > removed and then re-inserted above or below its next neighbor, as > long as that move is possible. > > Note that this requires Prototype 1.6.x for the ''insert'' and ''this'' > magic. It could be done in 1.5.1, but would need to be written > slightly differently. > > Walter > > On Feb 20, 2008, at 3:56 AM, Marco de Jong wrote: > > > > > I have a page with about 5 divs, with some random content, underneath > > each-other. > > > Now I want to enable the user to be able to sort these divs, but > > without drag-and-drop. > > (this interferes with flash-video player) > > > Is there a way to accomplish this with "classic" up and down buttons > > and mootools? > > > Thanx!--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
You''re welcome! Walter On Feb 21, 2008, at 4:24 AM, Marco de Jong wrote:> I wrote Mootoosl, but I meant Scriptaculous. Anyway.. I will try the > solutions you mentioned. > Thank you so much! > > On Feb 20, 4:06 pm, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote: >> Not sure about Moo, but in Prototype (which is what this list is >> about) you could accomplish the moving part simply with this sort of >> construction:--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
What does one use in place of insert() if one is stuck with Prototype version 1.5.1.2 (it is integrated into the MonoRail framework we are using). Ollie -- Missing jQuery qq On Feb 21, 1:06 am, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote:> Note that this requires Prototype 1.6.x for the ''insert'' and ''this'' > magic. It could be done in1.5.1, but would need to be written > slightly differently.--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
new Insertion.After/Before/Bottom/Top, and read up on bind() for how to wire the ''this'' part. Walter On Mar 4, 2008, at 6:01 PM, boermans wrote:> > What does one use in place of insert() if one is stuck with Prototype > version 1.5.1.2 > (it is integrated into the MonoRail framework we are using). > Ollie > -- > Missing jQuery qq > > On Feb 21, 1:06 am, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote: >> Note that this requires Prototype 1.6.x for the ''insert'' and ''this'' >> magic. It could be done in1.5.1, but would need to be written >> slightly differently. > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
I was getting an error when trying to Insertion that, something like
content.stripscripts is not a function...
With further thought I had a forehead slapping realisation - I don’t
have to use prototype to insert a DOM element!
JS:
var moverow = {
arrange : function(event){
var thisrow = this.up(''tr'');
var rowparent = thisrow.up(''tbody'');
var prevrow = thisrow.previous(''tr'');
var nextrow = thisrow.next(''tr'');
if(this.className == ''up'')
{
rowparent.insertBefore(thisrow,prevrow);
}
else if (this.className == ''down'')
{
rowparent.insertBefore(nextrow,thisrow);
}
this.focus();
Event.stop(event);
}
}
Event.observe(window, ''load'', function() {
$$(''button'').each(function(e){
Event.observe(e,''click'',
moverow.arrange.bindAsEventListener(e));
});
});
HTML snip:
<tr>
<td>Item 1</td>
<td>
<button type="button" title="Move down"
class="down">↓</button>
<button type="button" title="Move up"
class="up" disabled="true">↑</
button>
</td>
</tr>
<tr>
<td>Item 2</td>
<td>
<button type="button" title="Move down"
class="down">↓</button>
<button type="button" title="Move up"
class="up">↑</button>
</td>
</tr>
On Mar 5, 12:58 pm, Walter Lee Davis
<wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org>
wrote:> new Insertion.After/Before/Bottom/Top, and read up on bind() for how
> to wire the ''this'' part.
> > What does one use in place of insert() if one is stuck with Prototype
> > version 1.5.1.2
> > (it is integrated into the MonoRail framework we are using).
> > Ollie
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---