jqueryUI: Drag element from dialog and drop onto main page?

Posted by Seth Petry-Johnson on Stack Overflow See other posts from Stack Overflow or by Seth Petry-Johnson
Published on 2010-03-17T20:03:50Z Indexed on 2010/03/18 0:51 UTC
Read the original article Hit count: 367

Filed under:

jqueryui

I am trying to create a drag and drop system consisting of a workspace and a "palette". The workspace currently consists of re-orderable list items, and I want the palette to be a floating window from which I can drag items and add them to a specific position on the workspace.

I am currently using the jqueryUI "sortable" plugin for the workspace and the jqueryUI "dialog" plugin for the palette.

However, I cannot drag something out of the dialog and on to the main page. When I try, the item being dragged disappears as it crosses the boundary of the dialog (which makes sense). What can I change so that items will remain visible as I drag them out of the palette and allow me to drop them onto the main workspace?

Alternatively, are there any jquery plugins that offer this sort of drag-n-drop palette as a primary feature?

Related posts about jqueryui

jQueryUI selectable: can't apply theme to selected item ("ui-selected" class)

as seen on Stack Overflow - Search for 'Stack Overflow'
I am developing an application using jQueryUI. I am also using the Themeroller. I want to have as many of my styles as possible defined using the theme, so that if I need to change some styles, I simply have to create a new custom theme (or download an existing theme). I am trying to use the "selectable"… >>> More
JQueryUI with Google's CDN help

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I'm having trouble loading JQueryUI from Google's CDN. I've got an ASP.NET application that and am using this to call the scripts: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax… >>> More
Strange jQueryUI dialog error

as seen on Stack Overflow - Search for 'Stack Overflow'
I have dialog created like this $('#add_error').click(function(e) { $('<div>') .load('/someaction/format/html/') .dialog({ title: 'Some title', modal: true, width: 385, close: function() { … >>> More
Add a link to a JQueryUI autocomplete item

as seen on Stack Overflow - Search for 'Stack Overflow'
When a user starts typing on the searchbox, the suggestion page returns the latest item from all collections matching that nama, plus other data. I'd like to show that item (along its image), and a link to "see all items from this collection". I can do (most of) that with the following code: $('#search')… >>> More
[Google Maps] Trouble with invalid argument when switching jQueryUI based tabs

as seen on Stack Overflow - Search for 'Stack Overflow'
Here's a page with the issue To reproduce the error, using IE - click the directions tab, then any of the others. What I'm trying to do is this: On page load, do nothing really. However, when the directions tab loads - setup the map. Like so: $('#tabs').bind('tabsshow', function(event, ui) { … >>> More

Developer IT