Loading...
CloseCloseReport Inappropriate Cancel
From : guestTo : Subject : Content : Send
CancelTo : Subject : Content : Send
CancelEmail IDSubject : Comments : Send
Each Attachment size should not exceed 1.0 MB.
Max no of attachments : 3
This is preview!
You can also use the below options to loginLogin with FacebookLogin with GoogleLogin with Yahoo
Getting StartedUsing jQueryUsing jQuery PluginsUsing jQuery UIDeveloping jQuery CoreDeveloping jQuery PluginsDeveloping jQuery UIQUnit and TestingAbout the jQuery ForumjQuery ConferencesjQuery MobileDeveloping jQuery Mobile
Sub forum :
Move this topic
Hello,I made a plugin that allows items to be moved, sorted and nested in a tree made of nested lists.I have tested it only in Firefox 3.6 so far, it certainly needs more testing and probably some contribution.In the
I explain the known bugs, which I hope you can help me with. Inside the source file there are some other minor questions that need an answer.I know that a Tree UI is under development, but1. this is incredibly lightweight if all you need is nesting and sorting (7 KB including comments)2. it works, NOW :)The plugin is basically a porting of one that has been
2 years ago, so many thanks to Karel-Jan who did it back then!This is all, more info can be found in the demo page and inside the file itself. Hope you can help me consolidating this plugin!ManueleUPDATE -- Mar 28, 2011This plugin has been through many upgrades and improvements, and it reached today version 1.2.3. You can still know everything there is to know from the project’s , but for support, bugs, feature requests and such please use the official !UPDATE from the administrator:Visit the new developer’s page…nestedSortable is currently maintained at&. Please&.&is no longer developing this plugin.
Replies(128)
Ok, I see views, I don't see replies.
I'll try to be more specific.
As described in the demo page, the plugin has 2 annoying bugs:
The very last item on the bottom sometimes acts in a strange way,
due to the fact that the placeholder is incorrectly positioned one level
up the DOM tree. This is probably a Sortable issue.
Due to how 'tolerance' works, moving items up a list can be a
nightmare. 'Tolerance' should be set to 50% the droppable's content
exclud instead, it takes into account the whole
content. This is a Sortable issue as well.
So this is a basic structure of the sortable list:
&&&&& &li&&div&Item1&/div&
&&&&& &&&&& &ul&
&&&&& &&&&& &&&&& &li&&div&Subitem1&/div&&/li&
&&&&& &&&&& &&&&& &li&&div&Subitem2&/div&&/li&
&&&&& &&&&& &/ul&
&&&&& &/li&
&&&&& &li&&div&Item2&/div&&/li&
&&&&& &li&&div&Item3&/div&&/li&
&&&&& &li&&div&Item4&/div&
&&&&& &&&&& &ul&
&&&&& &&&&& &&&&& &li&&div&SubItem3&/div&&/li&
&&&&& &&&&& &/ul&
&&&&& &/li&
Which translates into this:
Now, bug #1:
If I try to move Subitem3, the moment I "grab" it, the placeholder gets positioned as Item5, instead of Subitem3.
And bug #2:
If I grab Subitem2 and try to move it above Subitem1, it becomes a nightmare, since Sortable thinks I want to move it above Item1.
What happens here is that Sortable takes into account Item1 &li& height, which is comprised of the sublist as well. Therefore it calculates it's 50% overlap on the whole Item1 &li& instead of taking into account only each item's &div&, which would be the desired behavior.
How can I make it work like that? I know I have probably to hack Sortable itself, but I'm at lost here (I'm mainly a php/frontend developer, with only basic knowledge of javascript and jquery).
Hope this is clear enough!
(Why doesn't the markup show up in the post? The lists in this post show up just as a piece of text...)
@mjsarfatti, how to get parent where node was dropped??any tips?
Visit the new developer’s page…nestedSortable is currently maintained at&. Please&.&is no longer developing this plugin.
I still don't see replies :)Anyway, I ripped my own code apart and built from the remainings a brand new plugin using the widget factory. Basically it contains a few ui.sortable functions modified to allow nesting and to work better with nested lists.The new demo page is here: And this is the plain plugin:&When the plugin site will start accepting new registrations again I will post it there, but for the moment this is the reference page, and any bug should be posted here.
Hi ManueleI found your code after searching for a while on Google for a more up to date nested sortable and I'm glad someone finally created one that's newer than 3)Just a quick question as I'm new to sortables - can you tell me how (or point me to some documentation) to send a serialized version of the list via a form? I'm sure it's in the jQuery sortables documentation somewhere but I'm having trouble finding it. Also (but less importantly) do you have any idea how I could send a serialized version of the list as an Ajax request when you drop a form element in a new position (but not if you start to drag it and then release it back where it started)?Many thanks for your great script.
Hi,with nestedSortable you can use the serialize or toArray methods just as described , but those functions will not give any clue to the indentation structure of the list, they will just print out the elements id's in order from the first on the top to the last on the bottom. A new feature could be to modify them to take into account the indentation level, but I don't have time at the moment.But let's say serialize suits your needs, I guess you could store it in a variable like thisvar serialized = $('.sortable').nestedSortable('serialize');...and put it in a hidden field.As for your second question, call nestedSortable like this:$('.sortable').nestedSortable({&&&&& // some options here&&&&& change: function() {&&&&& &&&&& // your ajax request here&&&&& &&&&& }});I'm glad you find the plugin useful!
Hi, good work on the plugin!I'm having some problems with sorting, when the sortable element is placed in an overlay (block UI). Is this something it has been tested with, and should work?When I drag some item, the placeholder is off by roughly the distance from the overlay to the top of the screen.&ul&&&& &li&&span&Home&/span&&/li&&&& &li&&span&About&/span&&/li&&&& &li&&&& &&& &span&Products&/span&&&& &&& &&& &&& &ul&&&& &&& &&& &li&&span&Razors&/span&&/li&&&& &&& &&& &li&&span&Knifes&/span&&/li&&&& &&& &&& &li&&span&Axes&/span&&/li&&&& &&& &/ul&&&& &/li&&&& &li&&span&Contact&/span&&/li&&/ul&$('ul').nestedSortable({&&&&& handle: 'span'});li span {&&& display:&&& padding: 6px 0;&&& border-bottom: 1px solid #5790AF;}li ul {&&& margin-left: 20}
What do you mean by 'overlay'?Try to add items: 'li' to the options, or add a class to the top &ul& so that nestedSortable isn't called on more items then necessary.
By "overlay" I mean a DIV that is overlaying the page, to make it look like a popup.The original code really was like below, I just stripped it.$('#menu-overlay & .content ul').nestedSortable({&&& &&& disableNesting: 'no-nest',&&& &&& forcePlaceholderSize: true,&&& &&& handle: 'span'&&& &&& items: 'li',&&& &&& opacity: .6,&&& &&& placeholder: 'placeholder',&&& &&& tabSize: 25,&&& &&& tolerance: 'pointer'&&& });The code below works without problems (note that it uses the original sortable)$('#menu-overlay & .content ul').sortable({&&& &&& opacity: .6&&& });I've made a screencast of the problem, please see the following link Edit: The blue rounded DIV is position: fixed.
Ok, it was a problem of how the item offset was calculated in my custom functions on intersect event. In fact, Running once more through the Sortable code I found a hidden custom option, toleranceElement, that holds the element inside the list item that you want the intersection to be calculated against.I don't know if that was clear, anyway download the new nestedSortable and add toleranceElement: 'span' to the options. This should fix it.
Thanks, worked great!Now I'm just having some problems moving an item to where I want it. Please see the new screencast I've made at
The biggest issue is to move an item from the Products group to the root.
Looks like you can't move any item to its parent level... I really don't know what could be the issue there, you should try to find your way in the plugin.Lines 122 to 124 are the ones moving the item up one list level. Try substituting this.positionAbs.left with this.position.left on line 122 and let me know if that worked. Or play a little bit with those lines and see if you come up with something.
I think I solved it. See the patch below.To get similar behavior as mine, add the following CSS to ul.ui-sortable on the demo page.position:left: 700
Looks good to me, I updated the plugin and the demo page, thanks!
Hi there,thank you very much for your code!! Finally someone took the effort to build a nested sortable list! Again thanks!&The only option I'm missing in your plugin is the option to set a maximum nested level. Are you planning to make this option?
Hi,Great plugin, keep up the good work :)I've found a small issue in IE where the placeholder doesn't resize to the size of the parent (the height is "auto" in IE).I've added the following code to the beginning of _mousDrag to fix this:&&& &&& &&& if (this.placeholder.css('height') == 'auto') {&&& &&& &&& &&& this.placeholder.css('height', this.helper[0].style.height);&&& &&& &&& }(This also fixes an issue when dragging an item with subitems directly down in IE)
Hi,I've found a small bug.When you try to move an item under a nested item which can't be nested and then move the item up one, the nesting-level will keep the same (one to many) and the placeholder keeps it's errorstate (red).To reproduce (on the demopage):- move Sub-item 3 up one, so it's the first child of Item 6- Select Item 7 and drag is as a child below Sub-item 3 (red placeholder, can't place)- then drag the item above Sub-item 3 to try and place it as the first child of Item 6
Hey there, it looks and works great, exactly what I need, but the lack of any indication of indentation when calling the serialize method is a major dealbreaker for me.Any chance this could be added in? Or could you at least briefly describe how you would go about doing it so I could give it a shot?
Wonderful plugin. I've been looking for a plugin which does not use an old version of jQuery.What I would find useful is possibilities for callback functions when an object has been moved (changed).
Thanks everybody for the testing and the feedback!So, replying one by one...unkie1984:I'm not planning to put that option into the plugin for the moment, as I'm busy with another big project, but I was thinking that version 2.0 should have both a maximum nested level and a maximum number of nestable items... I could work on that in 5-6 months, unless somebody else wants to code that part and I would be happy to include it in the plugin.Xtracy:As for the IE issue, what version did you use? and is it an issue with the plugin only or is it in common with UI Sortable?And as for the second bug you pointed out, I see how it can be misleading, even though the item actually is placed correctly. I will look into both bugs in the next few days.tedavery:You are right. What stopped me from implementing a useful serialize method is that 1) I didn't need it as I used a callback function to send the structure of the tree to the database (see ); 2) I couldn't come up with an idea for showing the indentation level that would work for everybody. Do you have anything in mind?The default string comes up in the form foo[]=1&foo[]=5&foo[]=2 from items id's foo_1, foo_5, foo_2 ... which build's an array named 'foo' with values 1, 5, 2... How would you indicate the nested level? Or maybe the parent item would be better? What kind of string would you need? I'm open to ideas!evil_ape:See the
documentation, you can use all the callback functions available to Sortable!
Hi,The placeholderheight doesn't work in IE6, 7 and 8 (in compatibility mode).Sortable could have the same problem, but can't reproduce it correctly with the original sortable demo's (they use fixed heights, and when I remove those, the placeholder doesn't resize properly under any browser I checked).
Xtracy, I fixed both bugs.As for the IE bug, I decided to correct directly the _createPlaceholder function, where it gives it a height, instead of leaving the fix in _mouseDrag.Version 1.0.3 is
now.ps: I found
who made a similar plugin but for an older UI version... I will look into his plugin to see how he implemented the serialize, maxLevels and maxItems options, and start from there myself in order to speed up the development of these requested features.
I wrote you an email from your website, but got some kind of error returned. Anyway I implemented the serialized and toArray functions from
and it works. Only problem is that his implementation is a bit of spaghetti code and the toArray isn't really working at all, needs a different kind of approach.I made a literal copy though, have to rewrite it as soon as I have some spare time.Cheers
First of all, thank you very much for all the work on this plugin!! It is exactly what we needed and works perfectly for us. The one bit of functionality that we needed was the maxLevels option. We managed to semi-cleanly implement this using one of the standard sortable callbacks 'update'. Keep in mind that we only need it to work 2 levels deep so this will not work properly when you go deeper (issues with flattening the dropped list). It is specific to our app, but I thought someone might find it useful.update: function(e,ui){
ui.item.addClass("no-nest");
if (ui.item.parent().attr("id")=="reorder"){
ui.item.removeClass("no-nest");
if (ui.item.find("li").size()&0){
$(ui.item).find("li").each(function(){
ui.item.after($(this));
I created a save function for my project, and thought I could share it. Please see the gist link below.Questions are welcome.
At last, I implemented the serialize and toArray methods.serialize returns a string in the form setName[itemId]=parentId&... where each item in the list has an id in the format 'setName_itemId', and it works in the same way and takes the same custom options as Sortable of course.toArray gives basically the same result of znarkus' save function (I just wrote a different recursive function to make things shorter and cleaner):myArray[n]&&&&& item_id =& Item 'n' Id,&&&&& parent_id =& Item's Parent id,&&&&& level =& Item's Indentation Levelwhere the top level items have level = 0 (would it make more sense to have level = 1??)Version 1.1 is , and you can see these method's results directly in the demo page.
The jQuery Plugin site is back up, so I put the plugin
The serialize and toArray look great,). Normally a nested set has only one root item. This is the item with LFT 0 and RGT (maximum of items) + 1 (if not multiple nested root menus are present). So normally I would say it makes sense because the root item with LFT 0 would never be displayed in a sortable list anyway.On the other hand, I would use an option from where to count the root, where the default would be 0, e.goptions: {&&& & tabSize: 20,&&&&& disableNesting: 'ui-nestedSortable-no-nesting',&&&&& errorClass: 'ui-nestedSortable-error',&&&&& startRootCount: 0},Where the recursive call would be$(this.element).children('li').each(function() {&&&&& _recursiveArray($(this), this.options.startRootCount);});Now you can let the programmer decide what would make more sense for his/her code situation when using the toArray. For my situation (I use multiple root menus in one single MySQL table), I have to use this option and set the startRootCount to 1 so I don't have to manually increment the root value in PHP again.Cheers
That makes a lot of sense, I will definitely add this option in the next release.I'm also thinking about adding a RGT and LFT value to the toArray output, since many will (everybody should) use nestedSortable with a .
Yes that would definitely be a good idea. Only a single iteration in PHP or any backend would remain, most likely to update the entry of the nested set item where you can update the LFT / RGT values immediately (without a separate counter). I do assume that the ID used for the list_id is the entry ID for the nested set model. Don't see any other logic using the nestedS)Cheers
I do assume that the ID used for the list_id is the entry ID for the nested set model. E)
I just assumed this was the general usage )Some other things,I noticed a few things when sorting items in the list. First, when the sortable list is pretty big, and you scoll in the middle of the list and start to drag items (with children items, let's say 7 or so), then the scrollList pops exactly the size of those items being dragged upwards (I guess its the placeholder 'height' missing from the scroll window). This is the same effect when you hide a 'div' element at the bottom, and your scroll bar is also at the bottom. The window, when sorting, gets re-sized, which is, of course, logical because there is nothing in 'size' that can expand the window view. Though the sortable list still has items below. Though the window size gets reduced for just a fraction of a second, the placeholder should re-take the size again. But still the scroll bar moves upwards.Second, I created a workaround on the fly (again, not really a lot of time figuring out why it happens), I made the lists (ul elements) collapsible (fold-able), meaning you can drag a huge nested list over the entire list up and down. I'm still perfecting these steps, e.g make a list unfold when in range of sorting, fold again when out of range of sorting in the list.Third, I'm using a handler to drag the items, some how it feels like sorting items is more stable this way.If you want, and when I have a definitive version, I could send it to you and you just add whatev)Cheers
Glad you are working on the plugin!In order:First, I noticed the same behaviour, but with a 6 elements list(!) in a personal project. If I scroll down the page, the moment I start to drag an item, the window jumps upwards. But I can't seem to reproduce it in the demo page. I think it's not about the list length, but some other setup (css positioning probably...). I would ask you to test this behaviour against the plain Sortable, with the same list you have with all items at the root level, because if it is a Sortable issue, they should be notified of this. As for the div's dragged below the window border, are you sure it's the same thing? In this case there is a resize function in Sortable that takes care of that. In fact, another thing to try is to disable the window resizing from the options and see if something changes.Second, maybe the collapse thing could be made available on demand (e.g. clicking on the +/- sign), having the nested list behave like an expandable-collapsible tree? It could become some future enhancement...This said, please feel free to send me anything you code for this plugin!
I just released
with improvements to the toArray method to make it work better with the nested set model.Basically I added left and right values for each item, the item_id and parent_id now are plain numbers, and the first element of the array is the root element (the one with left=1 and right=maxRight + 1). Please read the documentation in the demo page for a better description as I'm too tired at this moment!
how to drag items between several trees in one page?
This goes beyond the scope of the plugin, but a workaround would be to let each tree be a &lI& item itself...
Hi mjsarfatti,Thanks for your hard work on this plugin, I've just begun implementing and it seems to work very well so far. &I did notice, however, that adding the disableNesting class only stops you from nesting under elements that have no children.In my application, I have a delete button next to each LI which disables that LI and all of it's children. &When disabled, other elements should not be able to be nested under that LI - this currently cannot be accomplished using disableNesting.I tested this on the demo as well, as it seemed to work at first. &Using Firebug, if you remove the "no-nest" class from any element that has it, you can then drop children on it. &Then if you add the "no-nest" class again, you can still add children to that node.Thanks again for your work. &I hope this helps.
I've got a similar problem, in that I have different types of items in my list, and there are rules regarding which types of items are allowed to be nested inside which other types of items.I tried to solve this by handling the start event, and only enabling nesting for items that are valid parents of the item being dragged, but I have the same problem you're having. &Unfortunately, if an invalid parent node already has other children, I can insert into the middle of the child list of the invalid parent.@slowgary, did your solution to the leaf-only nature of the no-nest class simply involve cancelling the sort if an invalid move is attempted? &I'd rather give my users the visual feedback, if I can, that a parent node simply isn't a valid target.Am I missing something? &Is there a way to avoid this child-list insertion without cancelling the sort event after a target is chosen?
Ciao Manuele,Thanks a lot for your plugin.Is there an built-in option to prevent sub items from move them under other parent items or in other levels?My need is the sorting of items only within the parent element.Best regards.
The plugin seems to be working great!Is it possible to add an option to modify the lists to start using &ol&&/ol& instead of &ul&&/ul& ?&thanks
Unordered lists (&ul&) are pretty standard. &If you need numbered lists, you can use CSS:&style&ul {&& & list-style-type:}&/style&
Hi everybody!I see that feature requests are starting to come in, and I'm happy to see it beacuse it means people want this plugin.These features can actually be implemented with a little fantasy and workaround. My intention is not to fill up the code with specific features used by only a minority of people, at least for the moment. As you can see in the demo page from the current roadmap, I will give priority to the maxLevels and maxItems options.@slowgary: the 'no-nest' class was thought for leaf items, but I guess you can give the 'no-nest' class to child elements as well?@rsaibot: you can make a different sortabl list for each parent.@cruz.fernandez: slowgary's solution will work, even though it's not semantic. An alternative is to substitute all ul's with ol's in the plugin file!
Thanks for the response&Manuele.@cruz.fernandez & manueleI don't think semantics come into play here. &Since both &ul& and &ol& each have an order, neither are very semantic to begin with. &They should be called Numbered List &nl& and Unnumbered List &ul&. &But since the number (or circle, square, disc, etc...) is just for presentation and not structure, it belongs more in the CSS than anywhere else. &Therefore, semantically it would probably be better if we just had a &list& tag. &I recommend using CSS and &ul& tags before modifying the nestedSortable source, especially since this has the potential to become the official tree plugin for jqueryui. &Someone could potentially replace your modified version in the future and break your app.Manuele,The no-nest class only works for leaf nodes, it currently does not work for nodes with children. &It would definitely be more useful if it worked for any node. &In my application, however, I needed my "disabled" nodes to no longer be draggable, and items dropped on a disabled node also become disabled. &I've solved my desired behavior with a few additional event handlers. &Your work has helped me greatly. &Thanks again!
From the W3 site:The
items, where the items have been intentionally ordered, such that
changing the order would change the meaning of the document. ...and:The
items, where the order of the items is not important — that
is, where changing the order would not materially change the meaning
of the document. I think I might have to change myself the plugin! We are dealing with sorting, and the order is fundamental in sorting.And the no-nest class thing is probably a matter of changing a couple of line of code, not much more. I will definitely look into it as soon as I have time.
Thanks Manuele and @slowgary
for your fast responses!
I think adding the parameter of "ul" or "ol" is the best approach, I've never head of anything called "nl".I have patched the config for making it configurable and choose ul or ol. Please tell me if it's ok.
Attachments
Size : 2.2 KB &&
Downloads : 2437
Awesome plugin buddy!Everything has gone well except for one issue that is plaguing me regarding the Cancel method inherited from Sortable.Apparently if you have a list like so (slimmed down):&ul&&&& &li&&div& Top &/div&&&&& &&& &ul&&&& &&& &&& &li&&div& Item 1 &/div&&/li&&&& &&& &&& &li&&div& Item 2 &/div&&&&&& &&&&& &&&&& &ul&&&&&& &&&&& &&&&& &&&&& &li&&div& item 3 &/div&&/li&&&&&& &&&&& &&&&& &/ul&&&&&& &&&&& &/li&&&& &&& &/ul&&&& &/li&&/ul&You can see that "item 3" is in its own UL nested beneath item 2. If you call Cancel on the sortable list while the list is sorting, before Update has finished, it will return the list item (item 3) back to its proper nested location.If you call Cancel on the sortable list after update is complete, it will delete the list item (item 3).From what I can figure, the UL is deleted from the LI after Update is complete and if the UL is empty. Then it tries to return the LI back to its spot by deleting it from the new spot and re-creating it back in the original UL. Since the original UL is gone, it simply deletes the LI.Is there a work around for this?Thanks again man!- Jordan
What do you mean exactly by 'after Update is complete'?Empty ul's are cleared in 3 moments:+ when the dragged item intersects another item, it checks if the intersected item has empty ul/ol's (eg. if you move item3 upwards to intersect item2) - line 102 of nestedSortable 1.2+ when the dragged item is moved to the left enough for having it moved a level upwards, it checks if what was the item's parent has been left with an empty ul/ol - line 125+ at the end of _mouseDrag, when _clear is called, it goes through the whole tree to see if there is any empty ul/ol left - lines 271-274You can try to comment out these liens to see exactly which one is interfering with your Cancel.
Hi cruz (and all), I released which contains the patch, and sets the default type to ol.I modified the option name to listType, that is more descriptive then parent.(Also, there is a short variable name for this.options, that is o. So instead of this.options.someOption you can use o.someOption)Manueleps: how do you guys produce patch files?
Thanks a lot for the fast response Manuele!I found an issue as there's a dangling "," in the definition of the options (line 21).I usually produce patch files with Eclipse's "create patch file".&Other options are if you use svn you can use "svn diff" also, the unix diff command or the windiff command (if you are a windows user)Cruz
Fixed the comma thing, thanks!I just noticed there is a big problem with the plugin: neither serialize nor toArray work in IE 6-8 (don't know about 9)... I had a quick look and couldn't come up with an idea of why they don't work. It would be great if anybody has any idea!-- EDIT --Nevermind, apparently I was using words that IE didn't like both in the JS and the HTML. I'm uploading now version 1.2.1 that works with IE (in fact, only lines 213 and 214 have been changed).ps: funny how nobody noticed that serialize and toArray weren't working (not even me!). I guess IE isn't used that much by developers...
Jordan here.Wow actual interfacing with the developer! Thank you.Anyways, thanks for pointing me to the _clear method, I have been working on that and it has resolved my issue. I will update to 1.2 before I get to integrated with the nested sortable, but once again thank you thank you.- Jordanp.s. by "after Update is complete" I was referring to the inherited "Update" method in Sortable.
Hi,Great plugin!.I however am having trouble getting the sorting to work using horizontal lists, even if I remove all styling and just use li float: left. The list items still react as if they were being sorted vertically, they jump up and down.Am I doing something or doesn't horizontal sorting work with this plugin?
Hi,it's not really meant for horizontal sorting... how would you sort a tree horizontally anyway?@jordan: i'm glad you worked it out!
First of all: really great plugin! Thanks for the great work!
Now my question:
I have a (normal) tree structure like this:
&&&&& &li&&div&item1&/div&
&&&&& &&&&& &ul&
&&&&& &&&&& &&&&& &li class="sortable"&&div&item2&/div&&/li&
&&&&& &&&&& &&&&& &li class="sortable"&&div&item3&/div&&/li&
&&&&& &&&&& &/ul&
&&&&& &/li&
&&&&& &li&&div&item4&/div&&/li&
And I currently load the plugin with: 'items: 'li.sortable'What I want to accomplish is that the root nodes aren't sortable, but *can* have children.So in the example I would like to be able to move item3 as a new child to item4.Currently this is only possible if:- items is set to 'li', but then the root nodes can also be sorted, which I don't want.- item4 already has subnodes. This has 2 drawbacks: firstly I have to add a node that I don't want to use and delete after I sorted item3 in place. Secondly: as soon as I move item3 to another parent, I can't return it to item4 as it's parent. (this one seems a bit& like md5madman's problem).I also tried the 'cancel' option of the original sortable plugin, but that doesn't do the job.Is this (currently) possible? If so: how?. If not: any pointers on how to accomplish this?
Just wanted to say a big thank you for releasing this plugin, great work.
Hi this script is beautifullI would need one option:i should not be able to move a node into the first leveldo you have any idea?
This is exactly what I need for the project I'm working on, thank you!I've only played with it for 10 minutes but so far it looks perfect.
@c_laze: you can use the 'start' callback function to check if it's a root node and cancel the sorting immediately@nevthexxx: make only second level lists sortable, not the main oneps: nestedSortable still works with jQuery 1.4.3 and UI 1.8.5
thank you for your post, but that is not what I mean.I have a tree, wich has some nodes in different levelsno node in level 3 or higher, can move in& level 1 or 2root&&& main&&&&&&& home&&&&&&& menu point 1&&&&&&&&&&& sub 1&&&&&&&&&&& sub 2&&&&&&& menu point 2&&&&&&&&&&& sub 1&&&&&&&&&&& sub 2&&&&&&& menu point 3&&& top&&&&&&& menu point 4&&&&&&& menu point 5&&&&&&&&&&& sub 1&&&&&&&&&&& sub 2&&&&&&& menu point 6&&&&&&&&&&& sub 1&&&&&&&&&&& sub 2no node can move in the same level as "root", "main" or "top"do you know what i mean
I understand, the solution is the same though: make different sortable lists for each second level list. Sortable allows you to connect lists do that you can drag an item from a list to another.
Hi, That solution was my first try but I can't used it because of 2 things:it allow to move a item in the root list (wich is not sortable) and then this moved item is lock there.if you remove the last item from an item list "wish is sortable" you can't add new item to it after. Any idea or fix ? Maybe a bug in the sortable of jQuery UI too !! I don't know[ ] sortable li in the ol.sortableroot 1&&&& [ item 1 ]root 2&&&& [ item 1 ]&&&& [ item 2 ]root 3
&&&& [ item 1 ]
&&&& [ item 2 ]
&&&& [ item 3 ]after moving to the left root 1 item 1 the result was:root 1item 1
&&&& [ item 1 ]
&&&& [ item 2 ]
&&&& [ item 1 ]
&&&& [ item 2 ]&&&& [ item 3 ]html code:&ul id="root"&&&& &li&&span&root 1&/span&&&& &&& &ul class="sortable"&&&& &&& &&& &li&&span&item 1&/span&&/li&&&& &&& &/ul&&&& &/li&&&& &li&&span&root 2&/span&&&& &&& &ul class="sortable"&&&& &&& &&& &li&&span&item 1&/span&&/li&&&& &&& &&& &li&&span&item 2&/span&&/li&&&& &&& &/ul&&&& &/li&&&& &li&&span&root 3&/span&&&& &&& &ul class="sortable"&&&& &&& &&& &li&&span&item 1&/span&&/li&&&& &&& &&& &li&&span&item 2&/span&&/li&&&& &&& &&& &li&&span&item 3&/span&&/li&&&& &&& &/ul&&&& &/li&&/ul&javascript:$('#root .sortable').nestedSortable({&&& &&& connectWith: '#root .sortable',&&& &&& listType: 'ul',&&& &&& forcePlaceholderSize: true,&&& &&& handle: 'span',&&& &&& items: 'li',&&& &&& placeholder: 'placeholder',&&& &&& tabSize: 25,&&& &&& tolerance: 'pointer',&&& &&& toleranceElement: '& span'&&& }).disableSelection();
I used the old nested sortable jquery plugin, bug if have to say that this one is way faster en more stable! Good Job!
I have one problem. I use this script for a CMS with pages. When i drag an item to a parent, i want to change the icon of the item to a "folder icon".
I wrote&a simpel function that excutes on de "update" event:
$("ol.sortable li").not(":has(ol)").removeClass('hasChildren', 1, function() {
&&&&&&$("ol.sortable li & .pageDetails .icon img").attr("src", "layout/images/icons/file.png").removeAttr('onClick');
$("ol.sortable li").has("ol").addClass('hasChildren', 1, function() {
&&&&&&$("ol.sortable li.hasChildren & .pageDetails .icon img").attr("src", "layout/images/icons/folder_open.png").one("load",function(){
&&&&&&&&&&&&$(this).attr('onClick','displayChildren(' + $(this).attr("id").replace("icon_", "") + ')').addClass('pointer');
&&&&&&&&&&&&$(this).parent().parent().parent().children('ol').attr('id', 'children_'+ $(this).attr("id").replace("icon_", ""));
&&&&&&&});
Any better suggestions on this function are welcome!
Items with children can be collapsed by clicking on the folder icon.
So my problem is: "How can i collapse a group with children when i drag an item to it." Obviously i only have this problem when a group with children is "uncollapsed" (so when the children are not visible).
the old nested sotrable did this automaticly. Any idea how to fix this?
Is it possible for someone to look in to my problem?
It would be really helpfull because i stuck with it.
Sorry but this is a post about the nestedSortable plugin... It's for discussing bugs, features and such, and your question has nothing to do with it. It's a simple jQuery question.You will get help if you post it in the right place I'm sure.Manuele
Ofcourse could this be a good feature for this function...?!?!
Yours is a very specific problem that appeals only to your particular setup. It's beyond the scope of this plugin (this is not a file system emulator plugin -at least for the moment-, but a 'sort nested lists' plugin), and it can be done with a few lines of jQuery! Again, post your question in the appropriate place and you will get your answer.
@slowgary:You wrote 25-Sep-2010:"In my application, however, I needed my "disabled" nodes to no longer be draggable, and items dropped on a disabled node also become disabled.
I've solved my desired behavior with a few additional event handlers."I like to disable some items from being draggable too. Can you explain how solved that?@mjsarfatti: Thank you for making this plugin! Just what I needed.
@slowgary:The Sortable example '' gave me the answer to my question yesterday.As Manuele told: 'All jQuery Sortable options, events and methods are available'This combination will do the job:&li class='ui-state-disabled' id='list_11'&$("ul.sortable").nestedSortable({
cancel: ".ui-state-disabled"});The list-item is no longer dragable.BTW You can also use .sortable for .nestedSortablePeter
Little fix to prevent item to be moved under a list that is not a sortable list "when move to the left"!replace ~ line 123:if (parentItem != null && parentItem.nodeName == 'LI' && this.positionAbs.left & $(parentItem).offset().left) {with:if (parentItem != null && parentItem.nodeName == 'LI' && $(parentItem.parentNode).data('sortable') && this.positionAbs.left & $(parentItem).offset().left) {This will check if the parent of this LI has "sortable" data.Hope it will help !EDIT --sorry you need to change it with this one :if (parentItem != null && parentItem.nodeName == 'LI' &&
$(parentItem).closest('.ui-sortable').length &&
this.positionAbs.left & $(parentItem).offset().left) {this other example will only work with one level ... my error ... ouppsss!
Thanks for the fix! Could you also let me see a test case? I'll release a fixed version soon.
Yes sure you can take a look at it here:&I'm didn't have time to fixe the other problem but when it is fixed I let you knowEDIT -the fixe is really simple if you have this problem because you have set css margin and padding to 0 just add a min-height to the list (ul or ol)&Philippe Archambault -
Sorry, I don't see bugs from the example you linked...
Hey there!First: This is an awesome awesome project and I hope it continues to be developed for many years to come!Second: Would it be possible to make it so that it honors the Sortable Axis controls? axis:y in particular. &In my experience this is the best way to deal with single level lists. &Great job!Thanks-David
Thanks David!It should already be working with the axis control, isn't it?
Ah sorry I didn't explain very well. &It stops the main li from going off the axis but the "nested" helper can still be moved under other items. &Which kind of defeats the purpose of restricting the y axis :)
Sorry, I still don't understand :)It looks like you would be better off with Sortable alone...
First off, great plugin. Unfortunately I am running into an issue.& The plugin falls apart on me when my sortable li's contain divs which have ul's or ol's that don't need to be sortable.& Ex.&ol class='sortable'&& &li&&&& &div&&&&&& &ol&&&&&&&& &li&My list item 1 nothing to do with sorting&/li&&&&&&&& &li&My list item 2 nothing to do with sorting&/li&&&&&&&& &li&My list item 3 nothing to do with sorting&/li&&&&&& &/ol&&&& &/div&& &/li&& &li&&&& &div&&&&&& &span&whatever&/span&&&& &/div&& &/li&&/ol&As you can see here my ol inside my first div is simply a list that I want to display inside my div and should not be sortable, but it trys to include the ol as sortable and throws errorf is null(function(a){a.widget("ui.sortable",a....table,{version:"1.8"})})(jQuery);;/*&& jquery....min.js (line 141)Anyway, just thought I would bring up the issue.& Great work nonetheless!
@railsengineer Maybe this will help you: First of all: Each &li& within the &ol class='sortable'&-tag needs a &div&-tag, also those you don't want to be sortable. Otherwise the complete list isn't sortable at all, is my experience.To unable sortable for a &li& (and his child ol-li combination) you need to add this to the javascript-sortable-part:$("ol.sortable").sortable({
cancel: ".ui-state-disabled"
And you give the not-sortable &li class="ui-state-disabled"& (better: &li class="ui-state-disabled no-nest"&)(Of course you can choose your own class-name)Peter
Is it possible to add some additional data like url or the item text to the to& dump() function? Something like that:'0' ...
'item_id' =& "root"
'parent_id' =& "none"
'depth' =& "0"
'left' =& "1"
'right' =& "34"
'path' =& ""
'name' =& "My Name"
The toArray function is meant to be used in conjunction with a database, so that data would be already available from the db. Also not everybody would have a URL. You can always modify the plugin for your own need though.
This part is relatively easy. Get the following line from your js file.ret.push({"item_id": id[2], "parent_id": pid, "depth": depth, "left": left, "right": right});You will find this by end of the following recursive function function _recursiveArray(item, depth, left) {and just before the linereturn left = right + 1;Now you can modify this like this, by sending the url as title attribute of your list, for example.url = $(item).attr('title');ret.push({"item_id": id[2], "parent_id": pid, "url": url, "depth": depth, "left": left, "right": right});
great work with the nested sortable pligin, has really helped me out.
i have an issue though
i am dynamically loading a nested list when a node with descendents is expanded, the sort works great in this scenario.
however i am also dynamically loading the nested lists during the drag process, so that if the user drags a node below a node with descendents (and its not already loaded them in) it then&triggers the expand (whilst the dragged node is still being dragged.
in this scenario the expanded node(s) cannot be dropped on.
[edit] i should add that once i release the dragged node elsewhere in the tree strtucture&drag and drop&including&inside the&expanded node works perfectly, so its something that fires on drag start, that needs to refire on open of my node perhaps
any ideas?
appreciate it
Every time you load new items to the sortable list you have to call nestedSortable again. But that could interfere with the item you are dragging in the moment you recall nestedSortable. Maybe loading the whole list and hiding non-expanded elements would be a better solution?
This is a really valuable plugin! It works great in all Mozilla browsers, also Opera, and is OK in IE7.But! I'm having trouble with it in Webkit browsers (Chrome, Safari). Behaviour is irregular, but it is especially "sticky" with dragging "up" a tree.Do others experience this behaviour too? Any fixes??
I tested it on Chrome on Mac and it works just fine, except that it selects text while dragging an element, but I think this is a webkit bug.
Hi!How do I add a child node to a node that does not yet have any children?
First of all, awesome work, after quite some research this is exactly what I needed.Just one question, is it possible to have a helper? With the normal jQuery Sortable you can define a helper clone which can be styled individually.Thanks.
@LukasAll jQuery Sortable options, events and methods are available, so the answer is 'yes' I suppose.I did not try the helper for myself, but I used another Sortable method within a Nested Sortable object, which works fine for me.Peter
You are right, apparently I did something wrong, it works just fine now. Thanks.By the way, did anybody write a maxLevel extension for this plugin yet?
Not yet, but I'm planning to implement it in the next weeks, most probably by the end of january
Awesome, I am looking forward to it.
Very nice!One thing that I think would be&beneficial&is the ability to lock an item - so it cant be dragged/sorted (similar to how&disableNesting works for the dropping side of things).This may already be possible... but find myself in a very similar situation to parchambault - here is what I am looking to achieve:ROOT&& & &Used Items {locked}&& & & & & &Item 1&& & & & & &Item 2&& & & & & &&&&&&&Item&5&& & & & & &Item&7&& & &Unused Items {locked}&& & & & & &Item&3&& & & & & &Item&4&& & & & & &Item&6From there I can serialize the data, ignore all items in the Unused cat and save the tree structure of the Used cat.Any thoughts / opinions would be very much appreciated :)
I have solved my issue - just realised that&connectWith is supported :).&so I made my&Used Items and Used Items&separate&connected sortables and joined them with&connectWith... now works perfectly!
Hey I've got a crude solution sort of based on @casimirloeber's solution for a 2-level sortable list:&&&&& update: function() {
&&& &&& &&& &&& var arraied = $('ol.sortable').nestedSortable('toArray', {startDepthCount: 0});
&&& &&& &&& &&&
&&& &&& &&& &&&
&&& &&& &&& &&&
&&& &&& &&& &&& // Find grandpappy and make it it's direct parent
&&& &&& &&& &&& for(i=1; i & arraied. i++) {
&&& &&& &&& &&& &&& if(arraied[i].depth & 2) {
&&& &&& &&& &&& &&& &&& parent = arraied[i].parent_
&&& &&& &&& &&& &&& &&& continueFlag =
&&& &&& &&& &&& &&& &&&
&&& &&& &&& &&& &&& &&& while(continueFlag) {
&&& &&& &&& &&& &&& &&& &&& for(j=0; j & arraied. j++) {
&&& &&& &&& &&& &&& &&& &&& &&& if(arraied[j].item_id == parent) {
&&& &&& &&& &&& &&& &&& &&& &&& &&& grandparent = arraied[j].parent_
&&& &&& &&& &&& &&& &&& &&& &&& &&&
&&& &&& &&& &&& &&& &&& &&& &&& &&& if(grandparent == 'root') {
&&& &&& &&& &&& &&& &&& &&& &&& &&& &&& continueFlag =
&&& &&& &&& &&& &&& &&& &&& &&& &&& }
&&& &&& &&& &&& &&& &&& &&& &&& &&& &&&
&&& &&& &&& &&& &&& &&& &&& &&& &&&
&&& &&& &&& &&& &&& &&& &&& &&& }
&&& &&& &&& &&& &&& &&& &&& }
&&& &&& &&& &&& &&& &&& &&&
&&& &&& &&& &&& &&& &&& &&& if(continueFlag)
&&& &&& &&& &&& &&& &&& &&& &&& parent =
&&& &&& &&& &&& &&& &&& }
&&& &&& &&& &&& &&& &&& arraied[i].parent_id =
&&& &&& &&& &&& &&& }
&&& &&& &&& &&& }}
Not sure if anyone else is receiving this error.& I just copied the demo pretty much, not much modification, and when testing toArray, I get an error: Parent Item is null line 214...& anyone else getting this?& Otherwise, great job on the plugin, i've been working on something similar, and when I found yours, I stopped!
Attachments
Size : 21.55 KB &&
Downloads : 2165
I've got a question that I think is simple but I've not been able to figure it out.Essentially, I want to disable the ability to sort children outside of their parents.So, I've got this:CATEGORY 1&&&&&&ITEM 1.1&& & &ITEM 1.2&& & &ITEM 1.3&& & &CATEGORY 2&& & &ITEM 2.1&& & &ITEM 2.2&& & &ITEM 2.3So, I'd like to provide the ability for users to sort the children within their category, and the ability to sort the categoryies themselves. But I want to disable the ability to move a child to another parent. (e.g. ITEM 1.1 cannot be moved to CATEGORY 2).I tried setting it so that the 'nestedSortable' function is called for every new OL but that simple disables sorting for everything entirely.Thanks for any help, excellent work on the plugin.
I'm having a small issue with the plugin at the moment. I'm using it as part of an ASP.NET MVC app, and I've built my sortables list dynamically from a database, however, when I go to save changes (without re-sorting the list or even with making changes to the list) and I run& $('ol.sortable').nestedSortable('serialize');The serialized string is empty.Have I missed a trick or is there some other problem.I'm creating my sortable with the following code:$('ol.sortable').nestedSortable({&&&&&&&&&&& disableNesting: 'no-nest',&&&&&&&&&&& forcePlaceholderSize: true,&&&&&&&&&&& handle: 'div',&&&&&&&&&&& items: 'li',&&&&&&&&&&& opacity: .6,&&&&&&&&&&& placeholder: 'placeholder',&&&&&&&&&&& tabSize: 25,&&&&&&&&&&& tolerance: 'pointer',&&&&&&&&&&& toleranceElement: '& div',&&&&&&&&&&& change: function () {&&&&&&&&&&&&&&& $.ajax({&&&&&&&&&&&&&&&&&&& type: 'POST',&&&&&&&&&&&&&&&&&&& url: '&%=url.action("SaveMenu", "Tools") %&',&&&&&&&&&&&&&&&&&&& data: {&&&&&&&&&&&&&&&&&&&&&&& sortlist: $('ol.sortable').nestedSortable('serialize');&&&&&&&&&&&&&&&&&&& },&&&&&&&&&&&&&&&&&&& success: function () {&&&&&&&&&&&&&&&&&&&&&&& alert("Woop data");&&&&&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&& });&&&&&&&&&&& }&&&&&&& });Thanks for any help in advance.EDIT: Nevermind, I've sorted it now. It was a mistake I made with naming my list items.
Hi,first i want to thank you for this amazing plugin. I designing php web app, where this kind of plugin is very useful.But unfortunately, in IE when you move item in the list, text suddenly gets bold or dissorted, it seems like its rendered 2 times. Same thing happens when is some kind of picture present in &li& tag, it get copied.Do you have some kind of solution for this kind of behavior in IE? In other browsers it works flawlessly.Thanks
Hi, what version of IE are you using? Also, could you post a screenshot of the problem?
I have a few suggestions in this awesome plugin. This plugin surely has the potential to become as useful as jquery. Menu, is something that every website need.1. One may not want to work on the full menu everytime. It's possible that we are working only on a part of the menu at a given time. We need thus a way to get a different left (not always 2), a different root id (not always 'root') and what we can send while calling sortable.2. Because we can use this also to edit text / title in combination with text fields, if there is a way to get the same while calling the ret.push, will be awesome. For the moment, we can only access the li and it's attributes. If this could be extended to access input fields inside li items, we could use the same page for both modifying and sorting a menu.EDIT:The second one is solved, sending input values using li title, and updating them with onblur. For the first one, the same technique could be used, sending the left and root id values through title attribute of the main ol. Question is, how to&retrieve&the value. The following is returning undefined for&$(this).parent().attr('class').if ($(this).parent().attr('class') == 'sortable') { var idArray = $(this).parent().attr('title').split("|");}&var left = idArray[0];var root_id = idArray[1];Even tried this:var idArray = $(this).parents("ol.sortable").attr('title').split("|");Same result, error console of FF is returning&var idArray = $(this).parents("ol.sortable").attr('title') is undefinedEDIT II:If anyone is interested, this is finally solved with&var idArray = $(this.element).closest("ol.sortable").attr('title').split("|"); Can save a few hours of your time if you are in a similar situation.
Hi jeremy,for point 1, wouldn't it be easier to have the possibility to call nestedSortable with the two options&left: '14',root_id: 'xy' ?for point 2, your solution surely works. i've been using& plugin and it's also a good way in my opinion.
Hi, im using IE 8.0 ()i attached screenshot from demo page, also last moved item is stuck in placeholder .. :(
Attachments
Size : 21.21 KB &&
Downloads : 2178
I don't know what's wrong, my version of IE8 doesn't show this problem...
Hi Guys,I am using this plugin for a while now and I am absolutely pleased. I just found out the 'change' pointer, which helps me to save the list order instantly.&However, I noticed that the change pointer is triggered BEFORE the drag is finished (before the mouse is released). This is not helpful, since clients then will receive a 'order saved' message before they release their mouse AND again when they release the mouse.Is it possible to have a change pointer after mouse handling, maybe via somekind of work around?&
Hi Manuele,&Are you allready working on a maxLevel extension? I really look forward to this.Some people gave ways to solve this, but to me it seems better it will be integrated in the wonderful plug-in you made.Peter
&released.- Fixed an issue with the page jumping upwards in some situations with the list taller then the viewport.- Fix to prevent an item to be moved under a no-nest item while moved to the right. (Thanks to&)- Added&toHierarchy&method. (Thanks to&)This was a long due update. I will probably start working on the maxLevel extension in the next few days, unfortunately university has been keeping me very busy in the last months.There is a problem with the text rendering in some IE versions: I'm pretty sure it's a sortable bug, but I couldn't find a solution for it yet. A partial workaround is to use helper: 'clone' so that the text reverts to normal after dragging. Any help on this is very welcome!
I'm attaching the first 2.0 alpha release - 2.0a1.It has a first, very buggy implementation of maxLevels.Please download it and play around with it, see if you have any suggestion to fix things. (just change the file extension to .js)Currently maxLevels is set to 3.Bugs:- maxLevel error is not detected if the placeholder sits right after it's parent &li& and befor- if maxLevel error is detected the placeholder is sent immediately at its parent level, this causes two issues:&& & &- if the error is detected when the placeholder is 2-3 levels higher then the maximum or more, it is se&& & &- there is no visual feedback with the current position.Ideal would be that the placeholder acquires the error class but stays in place, and when dragging stops it gets sent to the closest parent that will allow to respect the maxLevel limit.
Attachments
Size : 11.43 KB &&
Downloads : 2479
Awesome, I am looking forward to your final release of this features, it is all I need to make my life perfect.I just want to thank you for all your efforts, kinda like a little encouragement and support, your are doing a great job.
First of all a great compliment for such a helpful tool :)
Now, I have&following problem with the sort of navigation items with toArray method.
When I create a list with no sub-items, the order of the elements is correct.
As soon as I assign a sub-item of a main element, the first sub-item and treated accordingly receives a lower position than the main point.
This should not be. Is there any solution so I can change the order of the arrays to be passed through?
Thank you for your help!
Hi,have you tried to toHierarchy method? might be more suited... in the toArray method the actual position is given by the left and right values. I might work out a solution to have the array in a correct order, but not in the near future.&mEDITIn version 1.2.3 (to be released on march 28th) the&toArray&method will have the elements in the correct order!
Great.But I've some questions:Is it possible to collapse a nested list to only see the parent?Does anyone have an example of using nestedsortable and tabs? I would like to drag&drop any item to an other tab?Thanks
mjsarfatti,Wow, what a lifesaver of a plugin! (after I figured out how to make use of it). I have 2 questions:1.) Seriously, this plugin saved my ass with a project I have at work. Do you take donations through PayPal or some kind of secure money transfer service?2.) I'm having trouble with radio buttons inside of a container that is sortable, and this is really weird: it works fine in IE, but not in FF or GC. If I choose a radio button inside a sortable container and then try to move it, the radio button becomes unselected altogether.I prepared an example which you can view at:Add a few values, choose default for one of them, and then try to move that one to another location. The default radio selection should become unchecked. Is this a bug with the plugin? with the browser? with my code? (the most likely choice).Anyway, if you got time, I hope you can look into it. Thanks.EDIT: Hey&mjsarfatti, not sure why the link does not work. I tested it at a few different locations and had some friends verify it too. Perhaps my quasi-hosted dropbox link is blocked where you are? Anyway, I've attempted to attach the same files that are hosted to this forum post. If you have any trouble downloading or viewing it, let me know. Also, I'll be sending you a pizza beginning of next month. ;)
Attachments
Size : 42.39 KB &&
Downloads : 2365
Hello,First thank you very much for this plugin. It works very good.I need to add element that would always be first level and would not be nestable neither could nest others. It should be 100 fixed. Even non dragable :)
Thanks heaps for this plugin. its fantastic.Anyway, i have run into a small problem. For some reason the 'toArray' function is not working correctly for me.My code is as follows:$('ol.sortable').nestedSortable({
disableNesting: 'no-nest',
forcePlaceholderSize: true,
handle: 'div',
helper: 'clone',
items: 'li',
opacity: .7,
placeholder: 'placeholder',
tabSize: 25,
tolerance: 'pointer',
toleranceElement: '& div',
change: function() {
&&type: 'post',
&&cache: false,
&&url: 'admin/directory/categories/ajax_update_positions/',
&&sortlist: $('ol.sortable').nestedSortable('toArray')
console.log($('ol.sortable').nestedSortable('toArray'));The console.log output is as expected, but using the "change" option with the "toArray" does not work at all. i am getting the following error:Cannot read property '2' of null.if i change the "toArray" to "serialize", it works as expected.Any ideas?
@michael: I always considered this as my way to give something back to the community, but who am I to say no to a donation :) so I added a donate button at the bottom of the page for whoever feels like giving something. As for your other question, I can't see anything in the page you linked...@sergey: put it outside of the sortable list:&ol&&& & &&li&Fixed Parent&& & & & & &&ol class="sortable"&&& & & & & & & & &&li&etc...&& & & & & &&/ol&&/ol&@btwong: you could try a&&&&&&change: function() {&& & &&&&&&&alert($('ol.sortable').nestedSortable('toArray'))&& & &}to see if it has to do with the change option or with something else.
Hey mjsarfatti,I edited my original post to include an attachment of the files I am trying to work with. . Let me know if you need anything else.
i can see through the link now... go figure...the only thing that comes to my mind is to use clone: 'original' instead of clone: 'helper'?you should also give it a try with Sortable alone (just substitute&$('ol.sortable').nestedSortable({ with&$('ol.sortable').sortable({&) to see if it happens only with my plugin.manuele
Hello,Firstly thank-you for creating this plugin. I have researched and tried every single jQuery sortable option and this one is the best.Quick question... I am getting the parent_ids successfully through&serialization&however not the order that they appear within their sub folders.Is there plans to incorporate ordering into the&serialization function? Perhaps someone has seen an example of getting the order and serializing it as well?Any help would be appreciated.Thanks,Tim
HI @ll.&I'm trying to recreate a Idea of an another user with the nestedSortable 1.2, but with no success. id="left-to-right" class="page-list"&
id="ele-1" class="clear-element page-item left"& &
class='sort-handle' src="img/handle.gif" align="left"& & Lorem ipsum 1&
id="ele-2" class="clear-element page-item left"& &
class='sort-handle' src="img/handle.gif" align="left"& & Lorem ipsum 2& &
class="page-list"& & &
id="ele-3" class="clear-element page-item left"& & & &
class='sort-handle' src="img/handle.gif" align="left"& & & & Lorem ipsum 21& & &
id="ele-4" class="clear-element page-item left"& & & &
class='sort-handle' src="img/handle.gif" align="left"& & & & Lorem ipsum 22 & & & &
id="ele-5" class="clear-element page-item left"& &
class='sort-handle' src="img/handle.gif" align="left"& & Lorem ipsum 3 type="text/javascript"jQuery( function($) {$('#left-to-right').NestedSortable(& & & & {& & & & & & & & accept: 'page-item',& & & & & & & & noNestingClass: "no-nesting",& & & & & & & & opacity: 0.8,& & & & & & & & helperclass: 'helper',& & & & & & & & onChange: function(serialized) { & & & && & & & & & & & & & & & $.post("saveMenu.php", 'm='+serialized[0].hash); & & & & & & & && & & & & & & & },& & & & & & & & autoScroll: true,& & & & & & & & handle: '.sort-handle'& & & & });});And saveMenu.php:&?php$aMenu = $_POST['m'];function saveMenu($parent, $children) {& & & & $parent = (int) $parent;& & & & $i = 1;& & & & foreach ($children as $k =& $v) {& & & & & & & & $id = (int) $children[$k]['id'];
$upd = mysql_query("UPDATE `cat_pro` SET `id_padre` = ".$parent.", `tabindex` = ".$i." WHERE `id` = ".$id) or die(mysql_error());
& & & & & & & & if (isset &( $children[$k]['children'][0] &)) {& & & & & & & & saveMenu($id, $children[$k]['children']);& & & & & & & & }& & & & & & & & $i++;& & & & }}saveMenu(0, $aMenu);?&
I want the same result as the original code,
I think the problem is here:
& & & & & & & & onChange: function(serialized) { & & & && & & & & & & & & & & & $.post("saveMenu.php", 'm='+serialized[0].hash); & & & & & & & && & & & & & & & },&
My code is the following&ul class="treeview"&
&li id="list-2"&&div&Inglés&/div&&ul &
&li id="list-18"&&div&&Comprensión Fonética y Lectura&/div&
&li id="list-19"&&div&Formación de Palabras y Frases&/div&
&li id="list-2"&&div&Lengua&/div&&li id="list-2"&&div&Aleman&/div&
&li id="list-23"&&div&&Comprensión Fonética y Lectura&/div&
&li id="list-25"&&div&Formación de Palabras y Frases&/div&
$('ul.treeview').nestedSortable({
disableNesting: 'no-nest',
forcePlaceholderSize: true,
handle: 'div',
helper: 'clone',
items: 'li',
opacity: .6,
placeholder: 'placeholder',
tabSize: 25,
tolerance: 'pointer',
toleranceElement: '& div',
change: function(){
serialized = $('ul.treeview').nestedSortable('serialize');
$.post("saveMenu.php", 'm='+serialized);
include "../db.php";
$aMenu = $_POST['m'];
function saveMenu($parent, $children) {
$parent = (int) $
foreach ($children as $k =& $v) {
$id = (int) $children[$k]['id'];
$upd = mysql_query("UPDATE `cat_pro` SET `id_padre` = ".$parent.", `tabindex` = ".$i." WHERE `id` = ".$id) or die(mysql_error());
( $children[$k]['children'][0]
saveMenu($id, $children[$k]['children']);
saveMenu(0, $aMenu);
I hope you can help me.
First, thanks for the plugin. It's the best one I've found so far!Second, I changed serialize to include the position of the item in the list as well. With the original serialize, when it finally got to my server and I parsed it, I couldn't be sure what the order of things were. If I didn't need to do this and I was just doing things wrong, let me know. Else, check out&&out.
To those who talk about order and position in the serialize method:I'm not sure I understand what you want to get from the method. As of now, it parses the list one item by one starting from the top, so that the order is as seen on the screen. Also, you should know that this&method is meant to be used with this kind of table:What do you mean by position/order exactly? maybe depth level?How do you use the data server-side?Have you considered the toArray method instead?just trying to understand the requests...
HI mjsarfatti,Thanks for Reply.&My English is not the best but I try to do the best to explain what I want to do.I have a MYSQL DB Table with some categories with the following structure:ID & PARENT_ID & TITLE & MENU_ORDER1 & & &0 & & & & Fruit & & &12 & & &1 & & & & Apple & & &23 & & &1 & & & & Pear & & & 34 & & &0 & & & & Colors & & 45 & & &4 & & & & Red & & & &56 & & &4 & & & & Blue & & & 67 & & &0 & & & & Food & & & 7What I want to do is a control panel of the categories to offer the possibility to rearange the MENU_ORDER and/or change menu_item to other parent and once done or with ajax on the fly save it to the MySQL DBID & PARENT_ID & TITLE & MENU_ORDER1 & & &7 & & & & Fruit & & &22 & & &1 & & & & Apple & & &43 & & &1 & & & & Pear & & & 34 & & &0 & & & & Colors & & 55 & & &4 & & & & Red & & & &66 & & &4 & & & & Blue & & & 77 & & &0 & & & & Food & & & 1&& & &So what I want to do is pass the new order and new parent it with nestedsortable to my MYSQL DB..&Thanks for help.
Hi everybody,I have two announcements to make in this post:1.&Version 1.2.3 , with a few bugfixes and improvements.2. Since this post is getting ever more bloated and complicated, I decided to give nestedSortable !From this moment on please use the official forum for bugs, questions, proposals, feature requests etc. It will help everybody communicate better, and it will help me help you!This post will always be here for... say... compliments for me and my work?&@benjirs: why not inaugurate the forum with your issue with the serialize method?Manuele
nestedSortable 1.3
, with the
Hi there,I hope you can help me with a little problem in Chrome? I
cant find any support for this plugin.
Look at the screen shot please
and the link
As you can see, the draged item is about 150px above the cursor.
1. It appears only if the window is little scrolled down.
2. When you try to drag some item and move, the item jump up about
that 150px.
Can you help me please? I dont understand javascript so deep.
Visit the new developer’s page…
nestedSortable is currently maintained at ilikenwf/nestedSortable.
is no longer developing
this plugin.
It appears that the original author has handed this off to somebody
else. But the good news is, it is currently and actively maintained, and
is at version 2.0. (last update was 29 days ago).
I would suggest updating, and then if you have problems, contact
the (new) author directly by posting an Issue on his GitHub project.
Version 2.0 project:
Original author's project. Note that the documentation explains
that it's been handed-off to a new author.
It's good to see when a project is handed-off like this, and
does not become &abandonware&!
Thanks I couldnt find that issue way on GitHub.
Topic Type :
Discussions
ProblemsChange topic type
Cancel Provide the permalink of a topic that is related to this topic