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 or http://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 -~----------~----~----~----~------~----~------~--~---
