I currently have implemented jQuery UI sortable on my list of items
<ul>
<li>1</li>
<li>2</li>
...
</ul>
To that list I have slider which shows only X number of items and rest can be shown by clicking next or previous buttons.
I tried to add sort parameter to sortable constructor and call those methods, but here is the thing. The container showNext and showPrevious methods do some jQuery animation and destroy first node etc. and I think that workaround would be easier and leave those methods for buttons.
How would you suggest to make this happen: When I start to reorder elements and moving to the end of the list, the list shows next element and places currently dragged after that, but doesn't stop dragging event.
I figured this by making container overflow:hidden and implemented sort(e,ui)
sort : function(e, ui) {
//move by modulus
}
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 have a sortable in which two consecutive elements may be "attached" to each other. When the attach action is performed, I wrap the two "field" elements in a "field-group-container" div in hopes that I would be able to drag both inner "field" elements as a unit.
Oddly enough, this approach works perfectly if I initiate the dragging from the field-group-container's first child (of two children), however, if I initiate the dragging from the second child, the field gets pulled out of the field-group-container. I would like the two field elements to move together regardless of which element is clicked to initiate dragging.
I tried making the "items" sortable option more specific to only allow dragging field-group-containers and fields that are not children of a field-group-container but it looks like the click event is cancelled before it bubbles up to the field-group-container.
In order to find out whether this is an issue with the sortable or my implementation of it, I created a boiled down version to see if I could replicate my issue.
<div id="sortable">
<div class="field">A</div>
<div class="field">B</div>
<div class="field-group-container">
<div class="field">C</div>
<div class="field">D</div>
</div>
<div class="field">E</div>
<div class="field">F</div>
<div class="field">G</div>
</div>
http://jsfiddle.net/prsGz/
It works exactly as expected!
This contradicts the behavior I'm observing in my project. In my real
implementation the "field" elements have several inner elements such
as labels, buttons, etc.
My question
Does anyone know what would be causing this behavior?
What could be causing my two field elements to not move as a unit
even though they are both wrapped in a parent container?
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 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/
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.