jQuery drag and drop to show hidden cells

Question

Can this be done in jQuery or any other tool? I have a top menu with tabs. When a tab is clicked the page loads below the top menu. I want to drag a menu tab into the section below the menu. This shouldn't move the tab, but it should trigger a function that I can use to manipulate the html.

Thanks!

Answer 1

Thanks Mark,

I got it working with jQuery using draggable and droppable.

Using the menu item id's I can make the manu itmes draggable and still not move them by using the revert option.

$( "#menuItem1" )
    .draggable( { revert: true, helper: "clone" } );

In the area below the menu I made a droppable section. Using the "drop" event handler I can fire off some action when the draggable item is dropped into the droppable item.

  $('#dropArea').droppable({ 
      drop: function( event, ui ) {
        do something here;
      }
    });

Answer 2

Yes there are plugins that offers this functionality, I think most of the drag and drop jQuery plugins has their own callback function that triggers once the dragging and dropping has finished. jQuery List DragSort is a plugin I've used in my project before, it's lightweight and easy to use.

$("menu").dragsort({dragEnd: showHiddenCells }); 

function showHiddenCells() {
//triggers after the user drops the element
}