I've read everything similar to my problem posted here but not found any solution.
I have created a menu with sub menu entries inside dropdowns. All menu entries are sortable to all menu levels. root menu entries to child lists and the other way.
Nearly everything works fine but sorting to the first dropdown results a bug. It is neighter not possible to sort a menu entry before the first dropdown nor to sort inside the first dropdown. By trying to sort inside the first dropdown the placeholder code spawn inside the neighbor (last) dropdown and on stop sorting the entry also is inside the last dropdown and not inside the first like it should. Sorting to the other dropdowns does not have this behavior. Maybe anybody has an idea about it?
Here is the js-fiddle:
http://jsfiddle.net/dehil/Vy4pu/1/
$('ul').sortable({ //
connectWith: $('ul'),
items: 'li',
placeholder: 'pf_sortable-placeholder',
tolerance: 'pointer',
cursor: 'pointer',
cursorAt: {
top: -20
},
zIndex: 20000,
placeholder: 'pf_sortable-placeholder',
})
Nested lists are always a bit awkward with jQuery UI. Recently I found http://johnny.github.com/jquery-sortable/ which may be used to sort bootstrap navs.
See http://johnny.github.com/jquery-sortable/#bootstrap.
Related
Question is that the clone helper on jQuery Sortable is not showing itself with the following settings:-
$('#sortable').sortable({
items: "li",
helper: "clone",
appendTo: "body",
placeholder: "ui-state-highlight"
});
Essentially, the placeholder is being shown, but the actual helper cloned element is not.
appendTo and helper are necessary because without the helper and appendTo, when I seek to drag the LI element, the li element will sometimes disappear and be deleted when dropped.
I can confirm there is no overflow css on the parent <ul> and that the disappearing <li> also happens when appendTo is set to parent. Containment did not prevent the <li> from disappearing.
I am using jQuery UI 1.10.2. Anyone konw how to address this?
EDIT: To be clear, I've identified that the item is disappearing into a child sortable, because there are intersecting divs in the list structure containing child sortable elements.
Is it possible to reject an LI element with a certain class from a sortable? Whats happening is that the LI is dropping into the child sortable even though it has no connectWith The LI needs to only be sortable inside its parent sortable and not try to insert itself in a child sortable (they even have separate ids and separate classes so not sure why this is happening).
Partial Solution:
stop: function(event, ui){
if(ui.item.parent().attr('id') !== 'sortable'){
$("#sortable").sortable("cancel");
}
},
If anyone has a better solution, please do let me know.
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.
How can I adjust the position of Select2 container so that the search box is position right over the original select element like in this website
http://www.jobnisit.com/en
It look cleaner in terms of UI in my opinion.
Ps. sorry, I can't post the image now.
There is 2 ways to do this.
1) With css:
.select2-dropdown--below {
top: -2.8rem; /*your input height*/
}
This will not affect a container (.select2-container), but will move dropdown and search field, so you will have a desired effect.
2) With js:
$('select').select2().on('select2:open', function() {
var container = .$('.select2-container').last();
/*Add some css-class to container or reposition it*/
});
This code attaches a handler to 'select2:open' event, which will be fired every time when user opens a dropdown. This method is better if you have more than one select on page.
Tested with select2 4.0.0
The proper way of positioning the dropdown is using the core feature provided by select2 plugin.
It provides us with 'dropdownParent' property to place to dropdown inside the particular element
select field: #edit-field-job-skillsets-tid
parent item: div.form-item-field-job-skillsets-tid
jQuery("#edit-field-job-skillsets-tid").select2(
{dropdownParent: jQuery('div.form-item-field-job-skillsets-tid')}
);
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');
}
});