Question

I have a menu system where I drag and drop menu items from a category into another container. I am using Jquery tools scrollable to display one category at a time, allowing me to page through the categories. Jquery-scrollable works based off of an overflow so anything outside the bounds of the is hidden. Works great. My issue is when dragging from the scrollable div, the menu item stays hidden. I’ve searched the web and was recommended the following but it didn’t work.

$(".menu_item").mousedown(function(){$('#menu_item_1').appendTo('body')});

The problem with this is that as soon as I drag the menu_item, It zooms down to the bottom of the body making dragging a bit difficult. Once I successfully drag the item to the container it’s fine…..unless I want to drag it back to where I started. Once I click on it disappears because it is now considered part of the body. I’ve also tried to alter the z-index of the item to no avail. Any recommendations on how to solve this problem?

Answer 1

Figured it out. Jquery UI sortable has the following function. Just add it to your sortable init statement. The appendTo and helper allow this functionality. Outstanding

$('.available_items').sortable
  connectWith: '.menu_menu_items'
  appendTo: 'body'
  helper: 'clone'