I'm creating a sortable tab in jQuery UI but I want to lock the last tab. I already panned it to the right, but it can still be sorted. What do I need to do to lock the last added tab?
Officially, you can specify on the sortable which sub-items you want to be sortable, just set the property items to a selector.
While it disables sorting when moving the other tabs (meaning the disabled tab never moves), it can still be dragged. To work around this issue, just bind a function to the item's mousedown event and call stopPropagation() to prevent the drag.
See this jsfiddle example: http://jsfiddle.net/wZ4c6/1/
$('#tabs').tabs().find('.ui-tabs-nav').sortable({
axis: 'x',
items: '> li:not(.locked)' //This will prevent sortables to move around the locked item
});
$('button').button().click(function(){
// Lock last tab
$('#tabs > ul > li:last').addClass('locked').mousedown(function(event){
event.stopPropagation();
});
// Refresh sortable items
$('#tabs').find('.ui-tabs-nav').sortable('refresh');
});
Related
I have a kendo ui grid on my page.
And I have a button too. I want when I click button, sortable property on a specify column disable, and when click the button again, sortable property enable.
How to I do this?
Thanks.
Runtime enabling/disabling the sorting feature of the Grid is not supported.
But you can find some approaches to achieve it here: http://www.telerik.com/forums/disable-or-remove-sortable-capability-on-column-with-rebuilding-entire-grid
Hope this link will help you.
There is no method for this - this is option which is set only upon initialziation. So you will need to re-initialize the whole Grid. Covered here.
The column.sortable option should be set to true/false depending on the button that was clicked.
You need to write an click event for a table header on javascript.This event will prevent click on table header.
$(".k-grid-header .k-link").click(function (e) {
e.preventDefault();
if ($(this).text() === Header Name) {
e.stopPropagation();
}
});
e.PreventDefault helps to avoid window jump to top when clicking #-links.
Give your headername into the if condition to which you want to disable sorting
I have a list of elements that are sortable and sort fine. I also have a droppable that resides outside of the sortable list. When I drop items on the droppable, it is intended to perform a copy operation, meaning that sorting during this operation is not desirable.
Unfortunately however, dragging a sortable to an external droppable causes sortable.update to fire. Is there a way to have all sortable drag/drop events ignored if a sortable is dragged outside of a given element?
I've gone through all the relevant sortable events, and I can't seem to find any reference to the element the sortable was dropped on, in order to see if they have common parents.
Here's a fiddle to demonstrate: http://jsfiddle.net/6yhbG/
Dragging either sortable 1/2 to the droppable causes the sortable.sort to fire.
OK finally got to the bottom of it: sortable('cancel') needs to be called from sortable.stop and I'm simply adding a class to the sortable so it knows whether to cancel itself or not:
$('div').droppable({
drop: function(e, ui) {
ui.draggable.parent().addClass('dropped');
}
});
$('ul').sortable({
stop: function(){
if ($(this).hasClass('dropped')){
$(this).sortable('cancel');
$(this).removeClass('dropped');
}
}
});
With my updated example at: http://jsfiddle.net/6yhbG/1/
I'd like to move around a list item with the sortable jQuery UI helper. I want to use some sort of handle : being able to move the whole div but only when using that handle. I don't want the div to move when clicking elsewhere than the handle.
Any idea how to do that ? I searched the documentation and didn't find anything. My only current idea would be to set some sort of function that enables the sortable state when I press the handle and disable it when I release the mouse but it feels sloppy.
Use the handle option:
$(document).ready(
function()
{
$('#sortable_list').sortable({axis: 'y', handle: '.handle'});
}
);
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 have an ul of draggable items (#doc-editor-options ul li), an area for dropping those items (#doc-editor-content) and an ul within that area for holding those items (#items-holder), which is sortable. This dragging and dropping is only one-way, only items from the list can be dragged and dropped into the holder.
$("#doc-editor-options ul li").draggable({
helper: 'clone',
connectToSortable: '#item-holder',
containment: $(".doc-editor")
});
$("#doc-editor-content").droppable({
drop: function(e, ui){
console.log('dropped');
}
});
$("#item-holder").sortable({
placeholder: 'placeholder-highlight',
cursor: 'pointer',
});
Two questions that I have:
Right now when I drag an item from the list and drop it into the other list, the drop callback for .droppable() is called twice. I think this has something to do with the #item-holder being sortable. I want it to only be fired when I drop an item into the list and only know about that item's event and ui in the callback.
I also need the functionality where by default, the items-holder is not sortable. The only time it becomes sortable is when you are dragging and hovering an item over it. So I can't sort the list by default, but if I drag an item over to it, I can choose where to place that item in the list (i.e. the list is now sortable) and once I drop it, the list becomes unsortable again.
EDIT: I figured out #2, I needed to bind mousedown to the draggable items which enables sorting then disables it on mouseup. Still having problems with #1, it seems like some of the sortable events are firing the drop callback when I drop an item in or I hover out of the item holder.
1:
Your drop() gets called twice because connectToSortable is also triggering a drop().
My suggestion would be to delete $("#doc-editor-content").droppable() altogether, and instead add the receive(e, ui) handler to your sortable.
2:
Your fix works. However I would suggest a much easier alternative: leave the sortable always enabled and add the option "handle: h2". (Pick any tag that will not exist within your LIs.) This will let you drop into the list, but disable user sorting in-place.
Example:
$('#item-holder').sortable({
placeholder: 'placeholder-highlight',
cursor: 'pointer',
handle: 'h2',
receive: function(e, ui) {
console.log('dropped');
}
});