Hi,
I''m trying to play with sortable tree and have two issues:
I have an AJAX Tree looking like:
<ul class=''TreeCat'' id=''work''>
<li class=''open''>
<img src=''s.gif'' class=''node''
onclick="Ajax.Tree.toggle(event,this);"/>
<a href=''anUrl''><span
class=''title''>Sitemap</span></a>
</li>
<ul>
In fact it is more complicated ...
I create a sortable doing:
Sortable.create(''work'',{tag:''li'',
handle:''title'',
hoverclass:''dragover'', dropOnEmpty:true, constraint:false,
tree: true
});
My 1st issue:
****************
The Drag n Drop works very well but when I drop the LI, the link is
followed. Is there a cross browser way to stop the link event ?
-> onChange is called too soon and onUpdate is never called.
May be I will have to set a specific handle without links ?
My 2nd issue:
****************
When user click on image node, an Ajax request is sent using JSON-RPC.
I get the response and directly set the innerHtml under my node.
But all sortable stuff is not working, off course ! Is there a way to
expand the sortable mechanism to new tree children ? or may be I will
have to destroy and re-create the sortable (time consuming ?)
Best Regards
Jean-Philippe Encausse
On Jun 14, 2006, at 3:54 AM, Jean-Philippe Encausse wrote:> My 1st issue: > **************** > > The Drag n Drop works very well but when I drop the LI, the link is > followed. Is there a cross browser way to stop the link event ? > -> onChange is called too soon and onUpdate is never called. > May be I will have to set a specific handle without links ?dragStart fires on mousedown. dragEnd (and thus onChange) fires on mouseup. following the link occurs on click (and the events occur in this order) You''ll need to flag the element on dragStart to not follow, and check (and reset) your flag when handling the click. TAG
May I set directly callback "dragStart" and "dragEnd " in options of my Sortable.create ? On 6/14/06, Tom Gregory <tomg-PGZyUNKar/Q@public.gmane.org> wrote:> > On Jun 14, 2006, at 3:54 AM, Jean-Philippe Encausse wrote: > > > My 1st issue: > > **************** > > > > The Drag n Drop works very well but when I drop the LI, the link is > > followed. Is there a cross browser way to stop the link event ? > > -> onChange is called too soon and onUpdate is never called. > > May be I will have to set a specific handle without links ? > > > dragStart fires on mousedown. > dragEnd (and thus onChange) fires on mouseup. > following the link occurs on click (and the events occur in this order) > > You''ll need to flag the element on dragStart to not follow, and check > (and reset) your flag when handling the click. > > > TAG > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >-- Jean-Philippe Encausse - R&D Jalios SA Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15 Do it Once, Use it Twice ~ Do it Twice, Make It Once
Your best bet is to attach an observer, which may look something like
this:
var MyDragObserver = Class.create();
MyDragObserver.prototype = {
initialize: function(element) {
this.element = $(element);
},
onEnd: function (eventName, draggable, event) {},
onStart: function (eventName, draggable, event) {},
onDrag: function (eventName, draggable, event) {}
}
Draggables.addObserver(new MyDragObserver(elementId));
Or even be simpler:
Draggables.addObserver({onStart: someFunction, onDrag:
someOtherFunction});
Contrary to my previous advice, you may wish to set the flag on drag
rather than on start.
TAG
On Jun 14, 2006, at 9:21 AM, Jean-Philippe Encausse wrote:
> May I set directly callback "dragStart" and "dragEnd "
in
> options of my Sortable.create ?
>
>
> On 6/14/06, Tom Gregory <tomg-PGZyUNKar/Q@public.gmane.org> wrote:
>>
>> On Jun 14, 2006, at 3:54 AM, Jean-Philippe Encausse wrote:
>>
>> > My 1st issue:
>> > ****************
>> >
>> > The Drag n Drop works very well but when I drop the LI, the link
is
>> > followed. Is there a cross browser way to stop the link event ?
>> > -> onChange is called too soon and onUpdate is never called.
>> > May be I will have to set a specific handle without links ?
>>
>>
>> dragStart fires on mousedown.
>> dragEnd (and thus onChange) fires on mouseup.
>> following the link occurs on click (and the events occur in this
>> order)
>>
>> You''ll need to flag the element on dragStart to not follow,
and check
>> (and reset) your flag when handling the click.
>>
>>
>> TAG
>> _______________________________________________
>> Rails-spinoffs mailing list
>> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>>
>
>
> --
> Jean-Philippe Encausse - R&D Jalios SA
> Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com
> GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net
> Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18
> 90 15
> Do it Once, Use it Twice ~ Do it Twice, Make It Once
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Many thanks for your explaination.
There''s something I don''t understand about the scriptaculous
API. May
be because
I''m a Java developer ;-)
Why do we have to do such things:
- Draggables.addObserver( ... )
or
- Sortable.onEmptyHover = function( ... ){ }
If I correctly understand the first one will be called for any drag on
a given element
The second will be called for any call to Sortable.onEmptyHover()
-> So If there is 2 drag action the observer will be called twice ?
That''s strange ? Why the API doesn''t allow to plug observer to
the
Draggable or Sortable instance instead of the static "Class" ?
Something like:
var sortable = Sortable.create(....)
sortable.onEmptyHover = function( ... ){ }
Regards,
Jp
On 6/14/06, Tom Gregory <tomg-PGZyUNKar/Q@public.gmane.org>
wrote:> Your best bet is to attach an observer, which may look something like
> this:
>
> var MyDragObserver = Class.create();
> MyDragObserver.prototype = {
> initialize: function(element) {
> this.element = $(element);
> },
> onEnd: function (eventName, draggable, event) {},
> onStart: function (eventName, draggable, event) {},
> onDrag: function (eventName, draggable, event) {}
> }
>
> Draggables.addObserver(new MyDragObserver(elementId));
>
> Or even be simpler:
> Draggables.addObserver({onStart: someFunction, onDrag:
> someOtherFunction});
>
> Contrary to my previous advice, you may wish to set the flag on drag
> rather than on start.
>
>
>
> TAG
>
> On Jun 14, 2006, at 9:21 AM, Jean-Philippe Encausse wrote:
>
> > May I set directly callback "dragStart" and "dragEnd
" in
> > options of my Sortable.create ?
> >
> >
> > On 6/14/06, Tom Gregory <tomg-PGZyUNKar/Q@public.gmane.org>
wrote:
> >>
> >> On Jun 14, 2006, at 3:54 AM, Jean-Philippe Encausse wrote:
> >>
> >> > My 1st issue:
> >> > ****************
> >> >
> >> > The Drag n Drop works very well but when I drop the LI, the
link is
> >> > followed. Is there a cross browser way to stop the link event
?
> >> > -> onChange is called too soon and onUpdate is never
called.
> >> > May be I will have to set a specific handle without links ?
> >>
> >>
> >> dragStart fires on mousedown.
> >> dragEnd (and thus onChange) fires on mouseup.
> >> following the link occurs on click (and the events occur in this
> >> order)
> >>
> >> You''ll need to flag the element on dragStart to not
follow, and check
> >> (and reset) your flag when handling the click.
> >>
> >>
> >> TAG
> >> _______________________________________________
> >> Rails-spinoffs mailing list
> >> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> >> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
> >>
> >
> >
> > --
> > Jean-Philippe Encausse - R&D Jalios SA
> > Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com
> > GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net
> > Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18
> > 90 15
> > Do it Once, Use it Twice ~ Do it Twice, Make It Once
> > _______________________________________________
> > 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
>
--
Jean-Philippe Encausse - R&D Jalios SA
Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com
GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net
Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15
Do it Once, Use it Twice ~ Do it Twice, Make It Once
The answer (as I understand your question, and I''m not sure I do) is that the observer paradigm is based on the "observer" design pattern, similar to attaching multiple functions to a standard Javascript event. The "addObserver" function allows you to attach multiple observers, each choosing how they would respond to a particular event. You could consider a simple observer to be an abstract class or interface, if you will. It is not itself a function, but rather a class of functions, each responding to a different event. In contrast, setting functions to be direct methods of the Draggable/ Sortable would require the developer to set those functions for each instance, rather than setting a more global observer, and would limit the programmer to one callback per "event." I expect I mangled and misused proper terms, but I hope I clarified more than I obfuscated. Perhaps someone else can explain it better than I. TAG On Jun 14, 2006, at 11:50 AM, Jean-Philippe Encausse wrote:> Many thanks for your explaination. > > There''s something I don''t understand about the scriptaculous API. May > be because > I''m a Java developer ;-) > > Why do we have to do such things: > - Draggables.addObserver( ... ) > or > - Sortable.onEmptyHover = function( ... ){ } > > If I correctly understand the first one will be called for any drag on > a given element > The second will be called for any call to Sortable.onEmptyHover() > > -> So If there is 2 drag action the observer will be called twice ? > That''s strange ? Why the API doesn''t allow to plug observer to the > Draggable or Sortable instance instead of the static "Class" ? > > Something like: > var sortable = Sortable.create(....) > sortable.onEmptyHover = function( ... ){ } > > Regards, > Jp > > On 6/14/06, Tom Gregory <tomg-PGZyUNKar/Q@public.gmane.org> wrote: >> Your best bet is to attach an observer, which may look something like >> this: >> >> var MyDragObserver = Class.create(); >> MyDragObserver.prototype = { >> initialize: function(element) { >> this.element = $(element); >> }, >> onEnd: function (eventName, draggable, event) {}, >> onStart: function (eventName, draggable, event) {}, >> onDrag: function (eventName, draggable, event) {} >> } >> >> Draggables.addObserver(new MyDragObserver(elementId)); >> >> Or even be simpler: >> Draggables.addObserver({onStart: someFunction, onDrag: >> someOtherFunction}); >> >> Contrary to my previous advice, you may wish to set the flag on drag >> rather than on start. >> >> >> >> TAG >> >> On Jun 14, 2006, at 9:21 AM, Jean-Philippe Encausse wrote: >> >> > May I set directly callback "dragStart" and "dragEnd " in >> > options of my Sortable.create ? >> > >> > >> > On 6/14/06, Tom Gregory <tomg-PGZyUNKar/Q@public.gmane.org> wrote: >> >> >> >> On Jun 14, 2006, at 3:54 AM, Jean-Philippe Encausse wrote: >> >> >> >> > My 1st issue: >> >> > **************** >> >> > >> >> > The Drag n Drop works very well but when I drop the LI, the >> link is >> >> > followed. Is there a cross browser way to stop the link event ? >> >> > -> onChange is called too soon and onUpdate is never called. >> >> > May be I will have to set a specific handle without links ? >> >> >> >> >> >> dragStart fires on mousedown. >> >> dragEnd (and thus onChange) fires on mouseup. >> >> following the link occurs on click (and the events occur in this >> >> order) >> >> >> >> You''ll need to flag the element on dragStart to not follow, and >> check >> >> (and reset) your flag when handling the click. >> >> >> >> >> >> TAG >> >> _______________________________________________ >> >> Rails-spinoffs mailing list >> >> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org >> >> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >> >> >> > >> > >> > -- >> > Jean-Philippe Encausse - R&D Jalios SA >> > Jp [at] encausse.net - http://www.encausse.com - http:// >> www.jalias.com >> > GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net >> > Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 >> > 90 15 >> > Do it Once, Use it Twice ~ Do it Twice, Make It Once >> > _______________________________________________ >> > 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 >> > > > -- > Jean-Philippe Encausse - R&D Jalios SA > Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com > GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net > Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 > 90 15 > Do it Once, Use it Twice ~ Do it Twice, Make It Once > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs