Opened 11 years ago

Last modified 6 years ago

#8384 open feature

Draggable+Sortable: make what is inserted configurable

Reported by: panzi Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.draggable Version: 1.8.21
Keywords: Cc:
Blocked by: Blocking:


Sometimes you don't want to paste a clone of the original item into the sortable, but something else. E.g. you might have some kind of toolbar from which you drag items into the list. In the list it then expands to "the real thing".

I made an ugly monkey patch to add such an feature, but it would be great if this would be included in jQuery UI. It is only an additional option, an tiny additional function (which handles the option to create the new element) and replacing $(self).clone()... at one point with a call to the function.


Change History (9)

comment:1 Changed 11 years ago by Scott González

The way this works is likely to dramatically change with the API redesign.

comment:2 Changed 11 years ago by panzi

There is an API redesign underway? How will this all work in the new API and would it be possible to make something like this with the new API?

comment:3 Changed 11 years ago by Scott González

comment:4 Changed 11 years ago by panzi

What will this redesign mean? Will it then be possible to use a touch device for D'n'D? I need to make big hacks to enable this right now.

comment:5 Changed 11 years ago by rdworth

Yes, part of the redesign is replacing the existing interaction base called 'mouse' with a device-independent base called 'interaction' that will support touch and mouse and other input devices. This work is being tracked at

comment:6 Changed 11 years ago by Scott González

Type: enhancementfeature

comment:7 Changed 10 years ago by Scott González


comment:8 Changed 10 years ago by mikesherov

Status: newopen

comment:9 Changed 6 years ago by matt-hoskins

Looks like this ticket hasn't progressed in a while, but I do have another scenario to add.

Something like this would be very useful for me to work around a consequence of a change introduced with 1.12.0 which is causing me problems.

For various reasons I have a table which is collection of rows, where each row is a draggable. I have a helper function for those draggables which would wrap the clone the row in a new table element. I also have a sortable which is a table where the rows are the sortable items. The draggables are connected to that sortable. Now this used to work fine as when the draggable was dragged into a sortable the code would clone the original source draggable (in this case, a tr) into the sortable, so you get a new tr appended to the table:

this.instance.currentItem = $(that).clone().removeAttr("id").appendTo(this.instance.element).data("ui-sortable-item", true);

Unfortunately with 1.12.x it looks like the code has changed such that instead of cloning the source draggable, instead it just adds in the draggable helper:

sortable.currentItem = ui.helper.appendTo( sortable.element ).data( "ui-sortable-item", true );

As my helper has a table wrapping this results in a table being appended to a table (as the sortable is a table) which is rather undesirable!

Unfortunately because the connectToSortable plugin doesn't provide any hooks to control what gets added to the sortable when the draggable is dragged in then I can't tidily work around this at present. I see there is still an undocumented "toSortable" event triggered on the draggable though not long after the item gets added, so I may be able to use that to work around the issue, but it would be far easier if there was a hook to allow control over what gets added to the sortable when a connected draggable is dragged in!

Note: See TracTickets for help on using tickets.