We have hierarchical items here with a series of TR structure and not in a nested table structure. So we need to have the functionality to drag and drop items with the same level or a function to sort same level items.
For example I'll try to move Item 1.1 below Item 1.4, that row must be displayed below Item 1.4 together with its children items(Item 1.1.1 and Item 1.1.2). It will work but if you will try to move the children items, it will not work.
And we should also be able to sort/move the Item 1, Item 2 and Item 3 together with its children.
Help with regards to these sorting in jQuery UI.
var tmpTr = jQuery(ui.item).clone(true, true);
var tmpParent = jQuery('tbody[data="'+ui.item[0].id+'"]').clone(true,true);
I think there's something wrong in my code for clone. By the way here's the jsFiddle link
[http://jsfiddle.net/UAcC7/403/ ]
Thanks,
After experimenting with jquery-ui Sortable for a recent implementation of a heirarchical list of items that are draggable/droppable/sortable, I ended up rolling my own implementation using Draggable and Droppable. It helped avoid a lot of squidgy issues with hierarchical and complex sorting/dragging/dropping interactions with Sortable. Even though I got less up front, I was able handle all the cases we needed to without understanding and hacking the default behavior of Sortable. This is not exactly an answer to your question about the behavior of clone, but it may help!
Related
I have nested jQuery accordions in my markup where I try to auto-open on page load according to the path that was last opened in previous sessions.
I saved the path into a cookie, loading the cookie and run the following code
path.forEach(function(label){
var element = root.find("[data-caption='"+label+"']");
element.parent().accordion( "option", "active", parseInt(element.attr('data-index')) );
root = element.children().eq(1);
});
The issue is that for some reason the 'active' takes effect only for the first accordion and non of the nested ones.
I checked several times and:
element.parent() is indeed an accordion (otherwise it would have thrown an error).
data-caption is a unique key for elements in each iteration.
element.children().eq(1) is the active panel (according to the structure of jQuery UI Accordion).
the active element I am asking to open indeed exists for each iteration.
I don't know what is the issue here, any ideas?
I found the problem by myself and post here for future reference.
The issue is this part of the code
parseInt(element.attr('data-index'))
And the reason lies with how accordion counts elements within its panel.
In my panel I had several html elements which were not accordion and several which were. Now the code above brought me the index of the accordion element in compare to the entire panel.
The issue is that for some reason .active only counts sub elements which are accordion themselves. So for example if the panel index of an element is 3 but it has 1 non-accordion element before it in the panel, then it's "active" index is actually 2.
I don't know why they chose for this behaviour, but there you have it.
My solution was to place a different attribute on the element with it's "active" index and use it instead of data-index.
Now everything works like a charm.
I am using a twitter jquery plugin to display a list (ul/li) of twitter posts .
Also I want my users to be able to rearrange the posts as they want and I want the moved post to be marked.
I saw a post here how to do so.
If I use this the selectable function doesn't work(I can rearrange but can't select):
$(document).ready(function() {
$(".ul_sortable" ).sortable().selectable();
});
If I use this the sortable function doesn't work(I can select but cant re arrange):
$(".ul_sortable" ).sortable().selectable();
The key is to use the sortable handle option as shown in the link to the other question.
Sortable and selectable both take over the mouse events for the items they are applied to, however the handle option allows you to apply the sorting to a part of the item therefor allowing selectable to work on the rest of the item.
It should also be noted that selecting a bunch of items then sorting them all together is not natively supported.
For marking if an item is moved you can use a variety of sortable events such as stop and change docs
I have a selectbox which takes its option values from a <ul> list. The list is changeable via jQuery UI sortable functionality, and the selectbox dynamically updates as you sort items differently.
I have made that functionality, the code is dirty but it does the job:
http://jsfiddle.net/trunkadelic/TtnTf/2/
What I need is a "reset" function, which brings the list (and thus, the selectbox) back to their original values. I am not sure how to approach this, even a nudge in the right direction would be much appreciated.
On page load I would store off the initial state of the list in a JavaScript variable. Then, when the reset link is clicked I would restore the state of the <ul> to what it was on page load. From there you can use the same method you already have to update the selectmenu to match.
I forked your jsFiddle to show this - http://jsfiddle.net/g8GLw/
I am looking for a jQuery list that is editable (add, change, delete elements), what is a good starting point code base that does this?
I found this one example which is great, but it doesn't add, edit or delete list items:
http://jqueryui.com/demos/sortable/default.html
you would use that jQuery library along side some small plugins, there not that hard to extend if you understand the Dom and jQuery.
take a look at this plug-in for example.
http://www.appelsiini.net/projects/jeditable/default.html
Using jquery UI 1.8's autocomplete, is there any known way to take the results and return them to a different div element on the page, or to customize how they look upon return? I want to have the results show up in a list that can be interacted with, essentially.
There does not seem to be a built in way to return the results to another location on the page. However, customizing how they look is quite straightforward, that is just a matter of applying CSS to the widget. The Theming docs will explain all the detail.
I would suggest attaching an event handler to one of the events of the autocomplete (maybe search) and writing your own custom code to capture the results and move them to the the required place in the DOM.