update, I was mistaken. I forgot that I got the .cancel to NOT render the original TRACKS list non sortable. That is fine, however the TRACK is still disappearing from the list when I have dropped it onto the PLAYLIST.
thx again. P On Sep 4, 10:47 am, TriAgency <[email protected]> wrote: > I am having a logic issue with doing a mashup that I went wrong > somewhere but I need a tiny bit of help with cancelling the Sortable > if it has started, but instead is dropped onto a Droppable. > > I have a list of items that are sortable, called TRACKS. > > I have another sortable list called PLAYLISTS. These LI items are > also droppable targets that TRACKS items can be 'dropped' onto. > > One big note, my intention is to NOT connect the 2 lists. I want > Tracks to be sortable, and to be able to grab any track and drop it > into a playlist, and if that happens, cancel the original sort call. > > TRACKS items can be sorted fine, and when the sort happens, the update > is made in the DB. > > TRACKS can be dropped into PLAYLISTS via draggable/dropppable method, > the proper ids are passed, and the track has now been added to that > playlist on the backend. > > Initially, I had a problem that when the TRACKS items were being > dragged to the PLAYLIST items, the sort of TRACKS was being kicked > off, even though I didnt want it to. If a track is being dragged to a > playlist, I wanted it to cancel the sort. So I figured out how to > cancel the sort call using .cancel > > I got that part working, but now I am stumped on this tiny last part. > > What is happening, is if you drag a track (which is both sortable and > draggable), it is dropped onto the playlist, but now it is > disappearing from the original Tracks list! The entire tracks list is > rendered no longer sortable now either. > > This did not appear as an issue until I made the .cancel call to the > sort function. > > What I think is happening is that the item/list is being stopped from > being sortable at all, and now somehow it is being pulled from one > list to the other. The droppable still fires properly, but what I > want is the original .sortable to just stop what it was doing, and > revert back to its original place in the list, instead of disappering > from the original list. > > I have tried defining helper:clone in the .Sortable but this does not > seem to work if it is also defined in .Draggable... > > If you want a good example of what I am trying to do look at iTunes > orhttp://www.thecloudplayer.com/(you have to login to do this here) and > create a playlist with items, then grab a track. If you start to drag > it inside the list area, you are given a helper:clone and the ui > indicates where the item will be placed. However if you then move > over top of another playlist and drop the item, the original sort has > been cancelled. > > *** Bonus points for whoever can point me to where I can select > multiple TRACKS li items and drag them all onto a playlist at the same > time. I *think* thecloudplayer is achieving this with using a SELECT > list, but I havent gone too deep yet. > > Thank you for your time and help on this issue!!! > > Phil / TriAgency > > Below is my code: > > ////////////////////////////////////////////////////////////////// > > $(".track-item").draggable({helper: 'clone'}); > > $(".playlist-item").droppable({ > > accept: ".playlist-info", > > activeClass: 'droppable-active', > hoverClass: 'droppable-hover', > drop: function(ev, ui) { > > var thePlayListId = $(this).attr("id"); > var theTrackId = $(ui.draggable).attr("id"); > > $("#message").load("draggable.php?tid="+theTrackId > +"&pid="+thePlayListId).fadeIn("slow").fadeOut(7000); > > $("#TRACKS").sortable('cancel'); > > } > }); > > $("#PLAYLISTS").sortable({ > > update : function () { > var order = $('#PLAYLISTS').sortable('serialize'); > > $("#message").load("sortplaylists.php?"+order).fadeIn("slow").fadeOut > (7000); > > } > }); > > $("#TRACKS").sortable({ > > update : function () { > var order = $('#TRACKS').sortable('serialize'); > > $("#message").load("sortfiles.php?"+order).fadeIn("slow").fadeOut > (7000); > > } > }); > > ////////////////////////////////////////////////////////////////// --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
