On Monday 22 January 2007 11:57, caefer wrote:> hi all,
>
> is there really no one who can help me with this?
>
> I basically need a sortable. plain and simple as that.
> BUT item dragged onto it should become children of their original
> parent when they are being dragged out of the sortable.
>
> think of three areas:
> 1. the container the draggables are coming from (the original parent)
> 2. the sortable
> 3. anything else
>
> with a normal sortable the draggables become the sortables children
> onHover.
> that''s fine with me. but when i drag them out of the sortable and
not
> yet onto the original parent (that''s 3 then) they should become
> children of 1 again. and reverting to 1 should of course work.
>
> also. dropping draggables onto the sortable should not move them from 1
> to 2 but copy them. I want to maintain the draggables in their original
> parent. think of it as a toolbox.
I came across a similar issue with one of the examples in the book, where I
wanted to be able to drag thumbnail images onto a sidebar without deleting
them from the main list. In short, the Scriptaculous Sortables aren''t
set up
to do this easily, but it can be done by mixing them with the lower-level
drag and drop, and there are a few gotchas along the way.
You can set your toolbox up (the container from which elements are being
dragged) using Sortable.create(), and get all the high-level stuff for free.
But, if you set the drop zone as a Sortable too, it will automatically grab
the items from the toolbox and remove them. If you set up the drop zone as a
simple Droppable instead, it won''t automatically
''eat'' the original item, but
will give you a reference to it in the onDrop() callback.
What you want to do in the onDrop() is to clone the dropped item, which raises
another issue. The "easy" way to do this is to just copy the innerHTML
of the
original into the clone. This is a bad idea if you''re going to try to
reference the original or the clone, or any elements inside them, as
you''ll
have duplicated the IDs, and $() will yield unpredictable results. So,
you''ll
need to distinguish between the tool on the toolbar, and instances of the
tool sitting on the drop zone, and write a function to create an instance
from the tool, which you can invoke from the onDrop() function, and then
stick the instance (not the tool) into the drop zone as appropriate.
You also wanted the elements in the drop zone to be sortable, if I understand
right. You can do this too, by invoking Sortable.create() on the drop zone,
on top of the low-level Droppable that you''ve already created. These
won''t
interfere with one another provided you set the containment property right
(this tells the Sortable which other containers it should accept things
from).
So, roughly, if we call the two containers ''toolbox'' and
''dropzone'', here''s
some skeleton code:
/* this lets tools be dragged from the toolbox onto the dropzone. Note that
containment excludes the toolbox itself, so you want be able to reorder
tools by dragging them - if you do, just add ''toolbox'' to
containment */
Sortable.create(
''toolbox'',
{ containment: [''dropzone''],
constraint: false
}
);
/* tell the dropzone to accept tools dragged off the toolbox. Note that we
check whether the incoming item is a tool or an instance, and only do stuff
if it''s a tool, because we''re just about to enable dragging of
instances onto
here... */
Droppables.add(
''dropzone'',
onDrop:function(tool,target){
if (isAToolNotAnInstance(tool)){
//create tool instance from tool
//add it to the target container
}
}
);
/* enable drag and drop sorting of elements within the dropzone. Note that
you''ll need to recreate this sortable whenever you add a new item into
the
dropzone - Sortable.create() can safely be called multiple times on an
element, and will tidy up after itself.
*/
Sortable.create(
''dropzone'',
{ containment: [''dropzone''] }
);
The one thing this won''t do for you is to automatically drop incoming
instances inbetween the nearest items on the dropzone, because that
interaction is handled by a low-level Droppable. Sortables achieve this
behaviour by drop-enabling all the items inside the container too - if you
want it here, you''d need to drop-enable the instances manually.
Hope that helps, and that I haven''t mangled metaphors too badly in
discussing
tools and toolboxes (just noticed the title of the thread says something
about a shopping cart...) .
Like I said at the outset, the Sortables aren''t really designed with
this type
of situation in mind, but might be evolving in that direction. Thomas (and
Sammi, whose name I see on dragdrop.js, and anyone else who''s thought
about
this) - are there any plans to add extra callbacks from the Sortables that
might make this sort of thing easier? Maybe an optional cloning function that
takes the dragged item as an argument and returns another DIV to be inserted
into the target in lieu of the original? Or would that just be horribly
fiddly and twisted? Is it a common enough use case to merit something like
this? Is it already in the 1.7 release, which I haven''t had a chance to
look
at yet?!
Cheers,
Dave
--
----------------------
Author
Ajax in Action http://manning.com/crane
Ajax in Practice http://manning.com/crane2
Prototype & Scriptaculous Quickly http://manning.com/crane3
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---