On 6/25/06, Dark Ambient <[EMAIL PROTECTED]> wrote:
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.
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
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, ...}
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.
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.
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');
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
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Regards, Kjell
_______________________________________________ Rails-spinoffs mailing list [email protected] http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
