I've found a article that explains how to connect draggable elements to sortable ones:
http://the-stickman.com/files/jquery/draggable-sortable.html
But what I need is to connect draggable elements to arbitary DOM elements,
I need to do something when I drop it on some element.
But how know the element that the draggable is on when I drop it?
Create a droppable, and use $(this) inside the ondrop function you set to refer to the droppable, and then do the connection.
http://jqueryui.com/demos/droppable/#event-drop
I believe that should do it, unless I misunderstand your problem.
Related
I'm using JQuery UI Sortable to allow reordering elements within a list when dragging element. I would like to improve this processing by allowing reordering only when dragging from an icon present in each element (this icon is a span within the li) not for the whole element.
Is it possible to do this with Sortable?
Thanks very much for your help!
Thierry
Yes, jQuery-UI provides a "handle" option:
http://jqueryui.com/demos/sortable/#option-handle
Restricts sort start click to the specified element...
Initialize a sortable with the handle option specified.
$( ".selector" ).sortable({ handle: 'h2' });
I'm using jquery ui draggable, I do not want to let the user drag the helper over another element, how can I do this? I can not use snapMode: outer.
Thank you.
You can use the revert draggable option for that purpose.
If you set it to "valid", the drag operation will be reverted if the helper is dropped on a droppable widget. That means you only have to create such a widget around your other element:
$("#yourDraggableElement").draggable({
revert: "valid"
});
$("#yourOtherElement").droppable();
I am using jQuery UI 1.8.16 and am having trouble dragging a draggable item through a sortable list and then dropping it on a droppable item.
Here is an example of my problem
http://jsfiddle.net/9RURx/1/
The draggable item needs to be able to attach to the sortable list or be dropped on the droppable item.
Any suggestions?
Passing through sortable seems to make the list element lose its selector... not sure why, but the "accept" property doesn't work anymore
Quickest solution is to change accept to accept: ".ui-draggable"' see it working here: http://jsfiddle.net/9RURx/3/
now maybe you don't want to use the built in class. You can add a class to the LIs you want to be dropable and refer to them that way. Like so: http://jsfiddle.net/9RURx/4/
I want to ask for you help with a problem i have with a sortable and a droppable witj jquery-ui.
I want to have a div (source) where i have lots of items groups by categories (to make it easier to read). The categories are all sortable. I want to be able to move from items from here to a droppable div.It seems like nothing happens when i drop the item as you may see in : http://jsfiddle.net/eUzeu/2/.
The funny thing is that if i echo (alert) $(dropped).attr('id') in the drop function it actually shows the correct div. But for some weird reason seems like it's triggering but the div doesn't gets attached to the droppable.
Any idea ?
I read that it seems that the connectWith allows to connect sortable with droppables but as you may see seems like it'snot working.
Any ideas ?
Although not fully what i wanted, at the end Frederic's solution was the one i used and works. I can't imagine why using two sortables behave better than a sortable and a droppable for what i want.
I have a list of images which are sortable. To delete them, the user will drag them from the Sortable list to a Droppable div representing a trashcan. How can I accomplish this?
Do I need to add a draggable to each of the image for it to work with the droppable?
The accepted answer seems to provide faulty information. For anyone referring to this post in future,
From rjmunro's comment for the accepted answer -
Sortables are already draggable. There's no need to explicitly declare them as draggable.
JSFiddle Demo
From JQuery UI Documentation -
By default, sortable items share draggable properties.
Yes, each image needs to be draggable (even though it is already sortable).
An item needs to be draggable so that you can drop it on your droppable area.
jQuery has a nice demo of how to make Sortable and Draggable items play nicely together:
jQuery UI - Draggable Demos