Don't forget that items inside sortable are already draggable. There's
no need to make them draggable again. So just specify as many
droppables as you need and let them accept those items. The demo I've
created could be modified like this:
First I'd put a div below the tabs:
<div id="trash" style="width: 10em; height: 10em;"></div>
And in the script section I'd add:
$('#trash').droppable({
accept: ".connectedSortable li",
drop: function(ev, ui) {
ui.draggable.hide('slow', function() {
$(this).remove();
});
}
});
That's it. :)
--
Bohdan
On Feb 6, 12:01 pm, dirk w <[email protected]> wrote:
> hello bohdan,
> thank you so much for your help!
>
> actually now it's possible to drag&drop the elements on those tabs and
> they get added there. it's also possible to sort those elements in the
> lists.
>
> the only problem which now appears is:
> the elements don't seem to be draggable anymore. at one point i
> declared them to be draggable but if i leave this snippet in the code,
> than your sort script doesn't work anymore. so i had to remove this:
> $(".searchResultEntry").draggable( {revert: true, helper: "clone",
> opacity: 0.40,});
>
> but that's no good because it should be possible to drag those
> elements out of the sortable lists to other containers. this is how
> the other containers are waiting for the draggable elements:
>
> $(".video1").droppable({accept: ".searchResultEntry", hoverClass:
> "videoDropHover", drop: function(ev, ui) { ............. }});
>
> by the way, i had to remove the disableSelection() function since it
> caused the following error:
> "$("#searchResultList, #nextSongsList").sortable().disableSelection is
> not a function"
>
> thank you very much for your help. i guess only the .searchResultEntry
> element (those which are sortable) needs to be proper draggable now,
> than it should be done. but how to do it without breaking the sortable
> stuff?
> dirk
>
> On 5 Feb., 20:52, Bohdan Ganicky <[email protected]> wrote:
>
> > I've put together a demo for you. Is this it?
> > :)http://jquery-ui.googlecode.com/svn/trunk/demos/index.html#sortable|connect-lists-through-tabs
>
> > --
> > Bohdan
>
> > On Feb 5, 4:12 pm, dirk w <[email protected]> wrote:
>
> > > i am sorry but i can't figure out how the "connectWith" could help me.
> > > i tried giving both lists the same class and add this as connectWith
> > > value but it doesn't work at all (now it seems like it destoyed the
> > > draggable option of those elements).
>
> > > remember, the two lists aren't visible at the same time (seperated
> > > tabs) and to add the element of the first list the image needs to get
> > > dropped on one Tab element.
> > > now it appears on the second list and this one just should be
> > > sortable. actually not too complicated but i am really struggeling :(
>
> > > dirk
>
> > > On 5 Feb., 14:02, Bohdan Ganicky <[email protected]> wrote:
>
> > > > Well, it seems that this is exactly what you
> > > > want:http://ui.jquery.com/demos/sortable/#connect-lists:)
>
> > > > --
> > > > Bohdan
>
> > > > On Feb 5, 12:32 pm, dirk w <[email protected]> wrote:
>
> > > > > hi bohdan,
> > > > > thanks for offering your help! i can't figure it out, even with the
> > > > > examples.
>
> > > > > what works already:
> > > > > i have a list of images which are draggable. they can get dropped on
> > > > > various places on the site as well as on a Tab.
> > > > > if dropped on a Tab they appear (append()) to an other list. in this
> > > > > list they are still draggable (so you can still drop them on those
> > > > > various places).
>
> > > > > the only thing i would like to do now is:
> > > > > the second list (where the elements appear after they got dropped on
> > > > > the tab) should be sortable. i mean people should drag those images
> > > > > around and arrange them new (like in this
> > > > > example:http://ui.jquery.com/demos/sortable/#display-grid)
>
> > > > > i tried to just make the second list droppable, but this leads to
> > > > > problems with jquery (i get funny errors in firebug). i thought maybe
> > > > > its because this list gets new elements all the time, so i declared
> > > > > the second list as sortable every time a new item gets attached. but
> > > > > this leads to a similar odd error.
>
> > > > > maybe i need to use the "connectToSortable" for my draggable elements,
> > > > > but i am not sure ho to use it.
>
> > > > > your help is much appreciated!
> > > > > dirk
>
> > > > > On 5 Feb., 12:10, Bohdan Ganicky <[email protected]> wrote:
>
> > > > > > Hi Dirk,
> > > > > > check out the "Draggable + Sortable"
> > > > > > demo:http://ui.jquery.com/demos/draggable/#sortable
> > > > > > It could be a good starting point. Hope that helps. If not, let me
> > > > > > know and I'll try to help you more.
>
> > > > > > --
> > > > > > Bohdan
>
> > > > > > On Feb 5, 11:23 am, dirk w <[email protected]> wrote:
>
> > > > > > > hi bohdan,
> > > > > > > i changed my mind (since i just couldn't figure out how to do it
> > > > > > > like
> > > > > > > i wanted). from now on the elements will not get copied, there's
> > > > > > > always just one instance of an element (this is probably less
> > > > > > > confusing to the user).
>
> > > > > > > but now i got a new problem, this time with sortable
>
> > > > > > > i have 2 ULs with LIs (which contain just 1 IMG)
> > > > > > > it's possible to drag an LI from the first list on top of an TAB.
> > > > > > > if
> > > > > > > dropped on the tab than the LI gets added to the second list. that
> > > > > > > works fine.
> > > > > > > but i would like to make this second list sortable.
> > > > > > > so if you drop an element on the tab than this should get added
> > > > > > > to the
> > > > > > > second list AND should be sortable in this second list (And still
> > > > > > > drag&droppable).
> > > > > > > the way i add items to the seconds list is this:
>
> > > > > > > // if result gets dropped on Playlist Tab than load it's
> > > > > > > Thumbnail and
> > > > > > > Data to the Playlist
> > > > > > > $(".playlist").droppable(
> > > > > > > {
> > > > > > > accept: ".searchResultEntry",
> > > > > > > hoverClass: "videoDropHover",
> > > > > > > drop: function(ev, ui)
> > > > > > > {
> > > > > > > if ($("#nextSongsList >
> > > > > > > .searchResultEntry").length < 14)
> > > > > > > {
> > > > > > >
> > > > > > > $("#nextSongsList").append(ui.draggable);
> > > > > > > }
> > > > > > > }
> > > > > > > });
>
> > > > > > > when i tried to make it sortable, than the items lost their
> > > > > > > draggable
> > > > > > > functionality :(
>
> > > > > > > dirk
>
> > > > > > > On 4 Feb., 16:27, Bohdan Ganicky <[email protected]> wrote:
>
> > > > > > > > So you want the draggable to clone itself and still be
> > > > > > > > draggable and
> > > > > > > > clonable again? Can you briefly describe the whole desired
> > > > > > > > functionality?
>
> > > > > > > > --
> > > > > > > > Bohdan
>
> > > > > > > > On Feb 3, 6:26 pm, dirk w <[email protected]> wrote:
>
> > > > > > > > > oh, that's odd. on the second sight it doesn't work.
> > > > > > > > > by using .append(ui.draggable.clone()); the clone seems to be
> > > > > > > > > not
> > > > > > > > > draggable anymore.
> > > > > > > > > by making it draggable (directly after it got cloned) it
> > > > > > > > > seems to get
> > > > > > > > > copied twice.
>
> > > > > > > > > have you heard about that?
>
> > > > > > > > > On 3 Feb., 18:09, dirk w <[email protected]> wrote:
>
> > > > > > > > > > works like a charm, thanks
> > > > > > > > > > dirk
>
> > > > > > > > > > On 3 Feb., 17:21, Bohdan Ganicky <[email protected]>
> > > > > > > > > > wrote:
>
> > > > > > > > > > > Hi,
> > > > > > > > > > > what about this:
>
> > > > > > > > > > > $('.draggable').draggable({
> > > > > > > > > > > helper: 'clone'});
>
> > > > > > > > > > > $('#droppable').droppable({
> > > > > > > > > > > accept: '.draggable',
> > > > > > > > > > > drop: function(ev, ui) {
> > > > > > > > > > > $(this).append(ui.draggable.clone());
> > > > > > > > > > > }
>
> > > > > > > > > > > });
>
> > > > > > > > > > > --
> > > > > > > > > > > Bohdan
>
> > > > > > > > > > > On Feb 3, 3:51 pm, dirk w <[email protected]>
> > > > > > > > > > > wrote:
>
> > > > > > > > > > > > hello ui community!
> > > > > > > > > > > > i would like to drop a draggable object and than
> > > > > > > > > > > > append() it to an
> > > > > > > > > > > > other list.
>
> > > > > > > > > > > > but i dislike that the draggable object than get's
> > > > > > > > > > > > removed from it's
> > > > > > > > > > > > original place (i mean the place where it was before
> > > > > > > > > > > > dropping it)
>
> > > > > > > > > > > > is it possible to create a copy of the draggable object
> > > > > > > > > > > > and than
> > > > > > > > > > > > appending this one to the second place? so the real
> > > > > > > > > > > > draggable object
> > > > > > > > > > > > would still stay at it's original place.
>
> > > > > > > > > > > > your help is much appreciated
> > > > > > > > > > > > dirk
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
