I'm trying to implement a drag and drop functionality using ui-sortable. However, of the 3 <li>'s that I have, I want only the 1st and last to be able to exchange their positions, the one in the center should maintain it's position. Is there a way to achieve this?
You can specify the appropriate selector in the items options:
$("#yourElement").sortable({
items: "li:first-child, li:last-child"
});
Related
I have two columns that I have its visibility to false. They are called $$TreeLevel and Instrument. I want to keep them hidden at all times so I am trying to remove them from the Grid Menu hamburger drop down. Is there a way to do this?
Thanks
Please use custom menu feature of UI grid, http://ui-grid.info/docs/#/tutorial/303_customizing_column_menu
Angular JS provides option to add custom fields to the UI Grid Menu. The 2 ways to do that are
1) gridCustomMenu function -> Used within the onRegisterApi function of the UI Grid.
2) Functions call present in the gridApi.core feature
gridApi.core has 2 primary functions -
a) gridApi.core.addToGridMenu(grid,items), where items is an array which comprises of a JSON object with certain properties that you want to add.
Ex - gridApi.core.addToGridMenu(grid, [{title: 'ABC', order: 10}]);
b) gridApi.core.removeFromGridMenu() -> I think you need to make use of this function to remove your custom entries from the UI Grid Dropdown!
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.
Take this example: http://jqueryui.com/sortable/#items. How can I make the list able to drop between elements two and three (both non-sortable)?
I ended up implementing draggable + droppable myself. This is not really an answer, but it is a way to achieve the same results.
If I have a a number of elements in one table column and I drag them one at a time to another column utilizing jQuery UI, how do I make remaining items in the first column move up, i.e. fill the gap left by the items that were moved. Assuming table cell valign="top".
I think it has to do something with DOM. It seems that even after I drag the item is it still in the same column.
You might want to use jquery ui's sortable instead.
http://jqueryui.com/demos/sortable/#connect-lists
You can connect lists and anything moved from one list will move the remaining elements to fill any gaps
However you are not giving us any code/markup to work with so I can only guess. Hope this helps!
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!