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 <[EMAIL PROTECTED]> 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 < [EMAIL PROTECTED]> wrote:
> Good morning
>
>
> On 6/25/06, Dark Ambient <[EMAIL PROTECTED]> wrote:
> > Thank you for the reply Kjell.
> > I've added some stuff inline:
> >
> > On 6/24/06, Kjell Bublitz <[EMAIL PROTECTED]> 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
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________ Rails-spinoffs mailing list [email protected] http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
