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/
Related
I want to implement similar functionality to the jQuery UI Draggable & Sortable, but using Kendo UI.
This should allow me to drag from a list of options and place them within a sortable list.
Here is the jQuery UI functionality: http://jqueryui.com/draggable/#sortable
I want 2 panels, one with items that can be dragged and the other containing the dragged items. The closest thing I could find on Kendo UI is: http://demos.telerik.com/kendo-ui/sortable/linkedlists, but the items in the first list (on the left) are sortable and this moves the item from the first list.
I have looked at all of the Kendo UI samples on Teleriks website, but I cannot see any examples of how to do this.
Update:
I am now part way there. I have 2 sortable lists and I have added code to stop the 'draggable' items from sortable. However, when I drag an item to the 'sortable' list, it disappears from the 'draggable' list.
Here's the code I'm using to stop the items being sortable:
start: function() {
$("#draggable li").each(function() {
$(this).removeClass("sortable");
});
Here is the fiddle: http://jsfiddle.net/kgjertsen/r4xmLevq/
Anyone able to tell me how to stop the items from disappearing?
After a lot of investigation, it turns out that you cannot link draggable with sortable, as you can with jQuery. You need to drop the item into the container, then sort it from its default place, which is at the bottom.
Telerik justify this with a statement saying that they cannot implement this behaviour as the controls cannot know about each other, as this is bad practice.
Personally, I think this is terrible and the functionality would be a great addition to the Kendo UI library.
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
You can see the code on http://designvictim.com/jqueryui/index.html
I'm trying to make something similar to the widget drag and drop from
Wordpress.
I've gotten pretty close to what we wanted to accomplish but we wanted
to be able to when you drag a item out of the "Drop Area's" and drop
it outside then it would erase itself and send of course an Ajax call
with the updated contents. That is why i made the #body droppable.
Also if you start a drag from the Module Column to one of the drop
areas i wanted it to be sortable directly before dropping it and i was
able to accomplish this with "connectToSortable: '.moduleContainer' "
but now every time i start with an item from the module container and
start dragging and hover one of the drop areas and continue to another
one, the drop function of the $('#body').droppable() fires which
boggles my mind!
I hope its some clumsy coding of mine and not a bug of jqueryUI.
Thanks in advance for any help and i hope i made myself clear on the
problem.
Figure it out!
I made my .moduleContainer droppable and sortable and you shouldn't do that. Automatically when you make a group sortable it becomes droppable. I couldn't find this information anywhere in the jQuery UI documentation though.
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.