I'm trying to setup a way to sort multiple items at the same time using jQuery UI's Sortable plugin. I have come up with a partial solution, where the checked items go with the drag, but I can't get them all to move positions. Here is what I have: http://jsbin.com/ecela
What do I need to add to ensure the items move to their new location and get removed when dragging starts.
Also, I'm wondering if there is a way to use selectable and sortable together. I'm guessing not because they both require you to click on the items to select and drag/sort them.
There's a jQuery plugin for that: multisortable.
They have a jsfiddle example there too. You select items with shift-click or command-click, then drag them around.
Seems like a good starting off point, at least!
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.
Scenario:
I'm currently working with KnockoutJS, jQuery UI's sortable and Masonry. I use Knockout to display a list of cards, Masonry to arrange the cards properly, and sortable for sorting the cards.
The cards are of similar size, but I'll be introducing different sizes later on so I surely need Masonry to help me arrange them.
I'm using a customized bindingHandler function for the sortable so that when the user sorts the cards, the item's position gets updated in the knockout observableArray.
Problem:
Since the knockout sortable function removes the item from the last position and puts it back to a new position, Masonry messes up and somehow sortable also not functions properly. What I discovered was if I simply float left all the cards without using Masonry, sortable works fine.
I plan to undo Masonry at the start of the sortable, and put it back at the stop of the sortable. However I don't know how to unbind Masonry. Is there a way? Or at least a way to get it working.
Here's a prototype of what I'm trying to do:
http://jsbin.com/avujom/9/edit
you could use masonry's destroy to remove masonry. so it removes the Masonry functionality completely. This will return the element back to its pre-initialized state. and you could create masonry element when you needed by msnry = new Masonry( container );. Also you could use layout method.
I have multiple accordion-set's nested in side of each other, they make a types of multi-category sorted list. Anywhere from 3 to 5 steps into the accordion nests I can start having actual items (buttons), they are in reality stylized 'A' elements.
I'm able to get the nested accordion-sets to refresh on successful AJAX return, but can not seem to figure out how to get the buttons to refresh and take on the jQ mobile styling.
$('#main-market-list').find('div[data-role="collapsible-set"]').collapsibleset({refresh:true}); is what Im using for the accordion-sets, whats the button version of the same logic?
You could try $(".ui-page-active").trigger("create") to force JQM to restyle the entire page.So your buttons too will get styled along with accordion sets.
edit: you could try $('.button-class').button('refresh'); where button-class is the class name for the links which you would like to style.
I am using jQuery ui.multiselect.js plugin to order columns in my jqGrid. I have noticed that there are some inconsistencies in the way this plugin behaves. It lets me drag-n-drop from right column to left but not left to right column. Has anyone got a working solution to this problem.
I don't think it is exactly a problem, it is the way the plugin is supposed to work if you set the option sortable: true which is the default:
you can drag column from right list to left to choose which ones you'd like to show in the grid
you can re-order the column on the left list to change the order they appear in the grid
Setting the option sortable to false cancels both these behaviors, you cannot drag to add and sort columns order anymore.
ui.multiselect.js has been updated since this post, and it now allows you to drag from left to right as well. It also allows you to load data from an external source now. You can check it out here.
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.