I apologize if these questions are not relevant to Scriptaculous. I just want to get a general idea if I can acomplish some or all of these things with the framework, and then what (if any) I''ll need to do outside just using javascript. For now, I have 2 column layout. On the right I want a form palette where form elements can be dragged to the left column. I have a form inside the left column div. 1- I need to have the elements in the palette snap to a "grid"inside of it. Same thing when it gets dropped into the form. I guess it would be tricky not having specific x/y points because there is no specific place in the form where elements must go or how they would be layout out. 2- Once the form is created, user fills in the info, hits the submit button, I will have an additonal div where I want to display the post form data. Anything within prototype to help facilitate ? 3- Last tricky thing is I''d like a way to replenish the palette, so when a text field gets used another would appear. My apologies if this goes beyond the subject matter for the list. Any pointers / links, would be greatly appreciated. TIA Stuart
Hello You can do all that very easy with prototype and script.aculo.us. I have answered one by one within quote. On 6/25/06, Dark Ambient <sambient-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > I apologize if these questions are not relevant to Scriptaculous. I > just want to get a general idea if I can acomplish some or all of > these things with the framework, and then what (if any) I''ll need to > do outside just using javascript. > > For now, I have 2 column layout. On the right I want a form palette > where form elements can be dragged to the left column. I have a form > inside the left column div. > > 1- I need to have the elements in the palette snap to a "grid"inside > of it. Same thing when it gets dropped into the form. I guess it > would be tricky not having specific x/y points because there is no > specific place in the form where elements must go or how they would be > layout out.You don''t have to worry about X/Y. Scriptaculous dragdrop.js handles all that. The actually "targeting" is performed by the elements (div). There is no limit in depth, layout or anything else. See "Sortable.create", and "Draggable" aswell "Droppable" in the wiki (aka documentation tab on the website) 2- Once the form is created, user fills in the info, hits the submit> button, I will have an additonal div where I want to display the post > form data. Anything within prototype to help facilitate ?You should check out the "onDrop" option. Combine this with either a " Ajax.Updater" or have a look at the "Builder" class. onDrop allows you to call various functions basicly allowing you to do anything you want.. change colors, do effects, create new elements, get content via ajax, etc. etc.. Formdata: prototype offers an easy function to do this: $F(''theTextfieldId'') .. returns the entered text. If you want to read the content of a div then use $(''theDivId'').innerHTML .. there is always something available in prototype to get the job done. I love it. 3- Last tricky thing is I''d like a way to replenish the palette, so> when a text field gets used another would appear.I don''t understand what a pallete is. Neither what replenish means (i''m german, pardon), but about the reappearing i can tell that this is quiet easy too. I forgot the name, but there is a option for this within the "Draggable" class .. if the draggable option is set to true the textfield will work as "pile" wherefrom users can drag unlimited textfields from (or whatever you set as draggable). If they drop the current object on a defined ''droppable'' the "onDrop" event is your friend to work further with this new type of user input (as described above) Regards, Kjell My apologies if this goes beyond the subject matter for the list.> Any pointers / links, would be greatly appreciated. >TIA> Stuart > _______________________________________________ > 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
Thank you for the reply Kjell. I''ve added some stuff inline: On 6/24/06, Kjell Bublitz <m3nt0r.de-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Hello> > 1- I need to have the elements in the palette snap to a "grid"inside > > of it. Same thing when it gets dropped into the form. I guess it > > would be tricky not having specific x/y points because there is no > > specific place in the form where elements must go or how they would be > > layout out. > > > You don''t have to worry about X/Y. Scriptaculous dragdrop.js handles all > that. The actually "targeting" is performed by the elements (div). There is > no limit in depth, layout or anything else.How would I define where elements can be placed. I used snap and understand how that works. What if I have a box, a div , can I make it so the element can only be dropped into the box or back to it''s original place ? I''m guessing that I would use the containment option but unsure who to use it. Right now I have a form where I want to drop the elements. I did a droppable add but not sure if I see anything happening differently.> 3- Last tricky thing is I''d like a way to replenish the palette, so > > when a text field gets used another would appear. > > > I don''t understand what a pallete is. Neither what replenish means (i''m > german, pardon), but about the reappearing i can tell that this is quiet > easy too. > > I forgot the name, but there is a option for this within the "Draggable" > class .. if the draggable option is set to true the textfield will work as > "pile" wherefrom users can drag unlimited textfields from (or whatever you > set as draggable). If they drop the current object on a defined ''droppable'' > the "onDrop" event is your friend to work further with this new type of user > input (as described above)I looked at clone but that only clones until element is released, then clone is destroyed I believe. Stuart
Good morning On 6/25/06, Dark Ambient <sambient-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > Thank you for the reply Kjell. > I''ve added some stuff inline: > > On 6/24/06, Kjell Bublitz <m3nt0r.de-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > Hello > > > > 1- I need to have the elements in the palette snap to a "grid"inside > > > of it. Same thing when it gets dropped into the form. I guess it > > > would be tricky not having specific x/y points because there is no > > > specific place in the form where elements must go or how they would be > > > layout out. > > > > > > You don''t have to worry about X/Y. Scriptaculous dragdrop.js handles all > > that. The actually "targeting" is performed by the elements (div). There > is > > no limit in depth, layout or anything else. > > How would I define where elements can be placed. I used snap and > understand how that works.containment and constraint: the first option aceppts an array of div-IDs (where can the items be dropped. constraint sets if an item is bound to the source element. like.. if you have two sortables, one on the left and one on the right you will have to set constraint to false and containment to [''left'',''right''] to become able to exchange stuff between those two. What if I have a box, a div , can I make it> so the element can only be dropped into the box or back to it''s > original place ?You can activate this behaviour by setting "revert" to true. if released anywhere but the target zone the child-div/list etc.. is going back to its origin I''m guessing that I would use the containment option> but unsure who to use it.as said above: make a array of all "dropzones" you want to have. var myDropzones = new Array(''left'', ''right'', ''center''); within the options... {..., containment: myDropzones, ...} Right now I have a form where I want to drop> the elements. I did a droppable add but not sure if I see anything > happening differently.A droppable makes an element _accept_ draggables. Example: You have a div element with text in it. we give it the id "mydroptext" and the class="text". Now we make this element a draggable: new Draggable("mydroptext" { revert:true, ghosting:true }); Then we declare where this item can be dropped by using the Droppable.add For this we create another div thats acts as target. Lets call it "mydropzone". Droppables.add(''mydropzone'', {accept: ''text'', onDrop: function(element, droppableElement){ alert(element.id+'' has been dropped on ''+droppableElement.id); }); Now the important thing here is the "accept" option. Accepts needs an "className". Thats why i have given mydroptext the class "text" first. I am not sure if the code will work straight away, but basicly this is how it goes.> 3- Last tricky thing is I''d like a way to replenish the palette, so > > > when a text field gets used another would appear. > > > > > > I don''t understand what a pallete is. Neither what replenish means (i''m > > german, pardon), but about the reappearing i can tell that this is quiet > > easy too. > > > > I forgot the name, but there is a option for this within the "Draggable" > > class .. if the draggable option is set to true the textfield will work > as > > "pile" wherefrom users can drag unlimited textfields from (or whatever > you > > set as draggable). If they drop the current object on a defined > ''droppable'' > > the "onDrop" event is your friend to work further with this new type of > user > > input (as described above) > > I looked at clone but that only clones until element is released, then > clone is destroyed I believe.I haven''t played with "clone" yet. I use ghosting, and revert but within the onDrop function we have both elements as variable so we can do some DOM manipulation if we don''t like how it works by default. Stuart> _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs >Regards, Kjell _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Here is how I currently have it set up and it''s not working , but
I''ll
explain what I have.
My form is contained in <div id="form4design">
So the droppable is configured as:
Droppables.add(''form4design'',containment:''field1'')
I haven''t set up an array yet, as I''d like to get just one
element working.
Something is wrong with the options though because I''m getting a
Javascript error:
"mising ) after argument list"
field1 is the id of the element I wish to contain in the form4design
now the draggable is set up like this:
new Draggable(''field1'',{revert:false,
snap:[50,50],constraint:''form4design''})
Weird thing is, now that I''ve set the constraint on this element it
won''t move at all (from it''s source point)
Sidenote, the field1 element will not move if I set the draggable to
the actual element id,
in order for me to make it work, I had to wrap a label around the
element and am using the label id to get it to move.
In case anyone wants to see the page:
http://icanc.com/dnd/demo.php
Stuart
On 6/25/06, Kjell Bublitz
<m3nt0r.de-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Good morning
>
>
> On 6/25/06, Dark Ambient
<sambient-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > Thank you for the reply Kjell.
> > I''ve added some stuff inline:
> >
> > On 6/24/06, Kjell Bublitz
<m3nt0r.de-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > > Hello
> >
> > > > 1- I need to have the elements in the palette snap to a
"grid"inside
> > > > of it. Same thing when it gets dropped into the form. I
guess it
> > > > would be tricky not having specific x/y points because there
is no
> > > > specific place in the form where elements must go or how
they would be
> > > > layout out.
> > >
> > >
> > > You don''t have to worry about X/Y. Scriptaculous
dragdrop.js handles all
> > > that. The actually "targeting" is performed by the
elements (div). There
> is
> > > no limit in depth, layout or anything else.
> >
> > How would I define where elements can be placed. I used snap and
> > understand how that works.
>
>
> containment and constraint:
> the first option aceppts an array of div-IDs (where can the items be
> dropped.
> constraint sets if an item is bound to the source element.
>
> like.. if you have two sortables, one on the left and one on the right you
> will
> have to set constraint to false and containment to
[''left'',''right''] to
> become able
> to exchange stuff between those two.
>
> > What if I have a box, a div , can I make it
> > so the element can only be dropped into the box or back to
it''s
> > original place ?
>
>
> You can activate this behaviour by setting "revert" to true. if
released
> anywhere
> but the target zone the child-div/list etc.. is going back to its origin
>
> > I''m guessing that I would use the containment option
> > but unsure who to use it.
>
>
> as said above: make a array of all "dropzones" you want to have.
> var myDropzones = new Array(''left'',
''right'', ''center'');
> within the options... {..., containment: myDropzones, ...}
>
>
> > Right now I have a form where I want to drop
> > the elements. I did a droppable add but not sure if I see anything
> > happening differently.
>
>
> A droppable makes an element _accept_ draggables.
>
> Example:
> You have a div element with text in it. we give it the id
"mydroptext" and
> the class="text".
> Now we make this element a draggable:
>
> new Draggable("mydroptext" { revert:true, ghosting:true });
>
> Then we declare where this item can be dropped by using the Droppable.add
> For this we create another div thats acts as target. Lets call it
> "mydropzone".
>
> Droppables.add(''mydropzone'', {accept:
''text'', onDrop: function(element,
> droppableElement){
> alert(element.id+'' has been dropped on
> ''+droppableElement.id);
> });
>
> Now the important thing here is the "accept" option. Accepts
needs an
> "className". Thats
> why i have given mydroptext the class "text" first.
>
> I am not sure if the code will work straight away, but basicly this is how
> it goes.
>
>
There are multiple errors in your code
All options must be enclosed with braces class.method(element,
{option:value,secondoption:value});
Applys to:
Droppables.add(''form4design'',containment:''field1'')
The option "constraint" only allows false, horizontal, vertical ..
your
value is completly misplaced.
Applys to: new Draggable(''field1'',{revert:false,
snap:[50,50],constraint:''form4design''});
If you fix this you will most probably have it going. i am not sure about
the snap because i have never used it before, but at least after fixing the
code it should work somehow.. i highly recommend to read the docs!
On 6/25/06, Dark Ambient
<sambient-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Here is how I currently have it set up and it''s not working , but
I''ll
> explain what I have.
> My form is contained in <div id="form4design">
> So the droppable is configured as:
>
>
Droppables.add(''form4design'',containment:''field1'')
>
> I haven''t set up an array yet, as I''d like to get just
one element
> working.
>
> Something is wrong with the options though because I''m getting a
> Javascript error:
> "mising ) after argument list"
>
> field1 is the id of the element I wish to contain in the form4design
>
> now the draggable is set up like this:
> new Draggable(''field1'',{revert:false,
> snap:[50,50],constraint:''form4design''})
>
> Weird thing is, now that I''ve set the constraint on this element
it
> won''t move at all (from it''s source point)
>
> Sidenote, the field1 element will not move if I set the draggable to
> the actual element id,
> in order for me to make it work, I had to wrap a label around the
> element and am using the label id to get it to move.
>
> In case anyone wants to see the page:
> http://icanc.com/dnd/demo.php
>
> Stuart
>
>
> On 6/25/06, Kjell Bublitz
<m3nt0r.de-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > Good morning
> >
> >
> > On 6/25/06, Dark Ambient
<sambient-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > > Thank you for the reply Kjell.
> > > I''ve added some stuff inline:
> > >
> > > On 6/24/06, Kjell Bublitz
<m3nt0r.de-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > > > Hello
> > >
> > > > > 1- I need to have the elements in the palette snap to a
> "grid"inside
> > > > > of it. Same thing when it gets dropped into the form.
I guess it
> > > > > would be tricky not having specific x/y points because
there is no
> > > > > specific place in the form where elements must go or
how they
> would be
> > > > > layout out.
> > > >
> > > >
> > > > You don''t have to worry about X/Y. Scriptaculous
dragdrop.js handles
> all
> > > > that. The actually "targeting" is performed by the
elements (div).
> There
> > is
> > > > no limit in depth, layout or anything else.
> > >
> > > How would I define where elements can be placed. I used snap and
> > > understand how that works.
> >
> >
> > containment and constraint:
> > the first option aceppts an array of div-IDs (where can the items be
> > dropped.
> > constraint sets if an item is bound to the source element.
> >
> > like.. if you have two sortables, one on the left and one on the right
> you
> > will
> > have to set constraint to false and containment to
[''left'',''right''] to
> > become able
> > to exchange stuff between those two.
> >
> > > What if I have a box, a div , can I make it
> > > so the element can only be dropped into the box or back to
it''s
> > > original place ?
> >
> >
> > You can activate this behaviour by setting "revert" to true.
if released
> > anywhere
> > but the target zone the child-div/list etc.. is going back to its
origin
> >
> > > I''m guessing that I would use the containment option
> > > but unsure who to use it.
> >
> >
> > as said above: make a array of all "dropzones" you want to
have.
> > var myDropzones = new Array(''left'',
''right'', ''center'');
> > within the options... {..., containment: myDropzones, ...}
> >
> >
> > > Right now I have a form where I want to drop
> > > the elements. I did a droppable add but not sure if I see
anything
> > > happening differently.
> >
> >
> > A droppable makes an element _accept_ draggables.
> >
> > Example:
> > You have a div element with text in it. we give it the id
"mydroptext"
> and
> > the class="text".
> > Now we make this element a draggable:
> >
> > new Draggable("mydroptext" { revert:true, ghosting:true
});
> >
> > Then we declare where this item can be dropped by using the
> Droppable.add
> > For this we create another div thats acts as target. Lets call it
> > "mydropzone".
> >
> > Droppables.add(''mydropzone'', {accept:
''text'', onDrop:
> function(element,
> > droppableElement){
> > alert(element.id+'' has been dropped on
> > ''+droppableElement.id);
> > });
> >
> > Now the important thing here is the "accept" option. Accepts
needs an
> > "className". Thats
> > why i have given mydroptext the class "text" first.
> >
> > I am not sure if the code will work straight away, but basicly this is
> how
> > it goes.
> >
> >
> _______________________________________________
> 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
On 6/25/06, Kjell Bublitz <m3nt0r.de-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: Thank you for all the help Kjell! It looks like the docs are what is available on the wiki ? Overall, I think for my current skill level, I''m passing on this potential project. The client wants something very similar to jotform. Probably something beyond realistic goals considering where I''m at. Stuart