Draggable to Sortable and back again

Draggable to Sortable and back again

I have two lists, one is a "master" list of categories (unordered), one is a sublist of these categories that you want to use for a navigation menu, which must be ordered.

I'd like to drag from #maincatlist to #navcatlist (this would remove the item in #maincatlist ), reorder items in #navcatlist , and drag items back if a user decides that a particular category no longer belongs.

I can easily make it copy the items from #maincatlist (a UI draggable element) to #navcatlist (a UI sortable element). I can hijack the 'receive' event of the sortable but if I try to delete the item that was being dragged (ui.item), draggable throws a javascript error when it tries to fire the default stop event.

I also have tried making #maincatlist a droppable, and it looks like I can drag items there, but they won't actually land there, they just snap right back into #navcatlist .

The IDs correspond to ul tags each with <li class='category' id='category-123'>...</li> items.

  1.  <script type="text/javascript">
     

     function resetSortable() {
     $("#navcatlist").sortable(
     {
     opacity: 0.7,
     placeholder: 'ui-state-highlight',
     revert: false,
     dropOnEmpty: true,
     cancel: 'img',
     scroll: true,
     items: 'li',
     helper: 'original',
     opacity: 0.85,
     zIndex: 55,
     containment: '#containment',
     tolerance: 'intersect',
     cursor: 'move',
     connectWith: '#maincatlist',
     delay: 20,
     receive: function (event, ui) {
     alert('new nav category');
     /* $item = ui.item;
     
     $(ui.helper).children('img').toggleClass('hidden unhidden');

     //Destroy the draggable and release all event handlers
     //$("#maincatlist").draggable("destroy");
     setTimeout($item.remove(),1000);

     // $("#maincatlist > " + id).remove();
     */
     }
     });
     }

     $(document).ready(function () {
     var $maincatlist = $("#maincatlist"), $navcatlist = $("#navcatlist");


     $('li', $maincatlist).draggable(
     {
     scroll: true,
     helper: 'clone',
     opacity: 0.80,
     revert: 'invalid',
     //appendTo: '#container',
     cursor: 'move',
     connectToSortable: '#navcatlist',
     delay: 20,
     stop: function (event, ui) {
     alert('fired drag stop');
     }

     });


     $maincatlist.droppable(
     {
     activeClass: 'ui-state-highlight',
     hoverClass: 'topDrop',
     accept: '#navcatlist > li',
     drop: function (event, ui) {
     alert('removed nav category');
     //Grab the ID of the ui.draggable object
     var id = ui.draggable.attr("id");

     //Destroy the sortable and release all event handlers
     $("#navcatlist").sortable("destroy");

     //Append the JQuery object using the ID attained above to the droppableDiv
     $("#" + id).appendTo($(this));

     //resetSortable();
     $(this).children('img').toggleClass('hidden unhidden');
     },
     connectWithSortable: '#navcatlist'

     });



     resetSortable();
     });