mjsarfatti / nestedsortable Goto Github PK
View Code? Open in Web Editor NEWA jQuery plugin that extends Sortable UI functionalities to nested lists.
Home Page: http://mjsarfatti.com/sandbox/nestedSortable
A jQuery plugin that extends Sortable UI functionalities to nested lists.
Home Page: http://mjsarfatti.com/sandbox/nestedSortable
I'm having the same problem with master and develop here. Not sure if it's something I've done. My HTML looks like:
<ol class='unstyled' id='content-sections'>
<li class='section' id='section_4f78a0ab0841f7537e000001'>
<div class='content clearfix'>
<h3 class='float-left'>
<i class='icon-move'></i>
asdfasdfasd
</h3>
<div class='btn-group float-right'>
<a href="/books/4f6ea7ac0841f72fd5000010/sections/4f78a0ab0841f7537e000001/edit" class="btn">Edit</a>
<a href="/books/4f6ea7ac0841f72fd5000010/sections/4f78a0ab0841f7537e000001" class="btn" data-confirm="This will permanently delete this section, are you sure?" data-method="delete" rel="nofollow">Delete</a>
</div>
</div>
<ol>
<li class='section' id='section_4f6f50db0841f738e7000003'>
<div class='content clearfix'>
<h3 class='float-left'>
<i class='icon-move'></i>
Hgfhgvhgv
</h3>
<div class='btn-group float-right'>
<a href="/books/4f6ea7ac0841f72fd5000010/sections/4f6f50db0841f738e7000003/edit" class="btn">Edit</a>
<a href="/books/4f6ea7ac0841f72fd5000010/sections/4f6f50db0841f738e7000003" class="btn" data-confirm="This will permanently delete this section, are you sure?" data-method="delete" rel="nofollow">Delete</a>
</div>
</div>
</li>
<ol>
<li class='section' id='section_4f6f50e80841f738e7000005'>
<div class='content clearfix'>
<h3 class='float-left'>
<i class='icon-move'></i>
Ihbihbihbihb
</h3>
<div class='btn-group float-right'>
<a href="/books/4f6ea7ac0841f72fd5000010/sections/4f6f50e80841f738e7000005/edit" class="btn">Edit</a>
<a href="/books/4f6ea7ac0841f72fd5000010/sections/4f6f50e80841f738e7000005" class="btn" data-confirm="This will permanently delete this section, are you sure?" data-method="delete" rel="nofollow">Delete</a>
</div>
</div>
</li>
</ol>
</ol>
</li>
<li class='section' id='section_4f864bfb0841f75e2c000002'>
<div class='content clearfix'>
<h3 class='float-left'>
<i class='icon-move'></i>
dsfsdfs
</h3>
<div class='btn-group float-right'>
<a href="/books/4f6ea7ac0841f72fd5000010/sections/4f864bfb0841f75e2c000002/edit" class="btn">Edit</a>
<a href="/books/4f6ea7ac0841f72fd5000010/sections/4f864bfb0841f75e2c000002" class="btn" data-confirm="This will permanently delete this section, are you sure?" data-method="delete" rel="nofollow">Delete</a>
</div>
</div>
</li>
</ol>
And my javascript:
this.$('#content-sections').nestedSortable({
handle: 'i',
items: 'li',
maxLevels: 3,
toleranceElement: '> .content'
});
isAllowed: function(item, parent)
{
alert('disableNesting');
return true;
}
My HTML looks more or less like this:
<ol>
<li><a class="title">Item</a></li>
<li><a class="title">Item</a></li>
<li><a class="title">Item</a></li>
<li>
<a class="title">Group</a>
<ol>
<li><a class="title">Item</a></li>
<li><a class="title">Item</a></li>
<li><a class="title">Item</a></li>
</ol>
</li>
</ol>
and I intialize it like this:
tree.nestedSortable({
disableNesting: "no_children",
forcePlaceholderSize: true,
handle: "a",
helper: "clone",
items: "li",
maxLevels: 10,
opacity: .6,
placeholder: "placeholder",
revert: 250,
tabSize: 25,
tolerance: "pointer",
toleranceElement: "> a",
connectWith: ".connected_field_lists"
});
The problem is that when I have an empty sublist,
Hi.
When I Maxlevels to 2, everything is fine as long as i'm dragging an element to a parent which currently doesn't have any submenu. When i try to add another submenu to that one, it doesn't allow it. So far so good!
On page reload, it DOES allow a submenu (third maxlevel) on that submenu. I take it this is a bug.
Would be nice if this would be fixed.
Greets.
When this option is enabled and i try to move the same root node again fast while still being moved it parses the root node to a sub item!
Try to move a rootnode to a sub and try to do it fast again while the root node is going back to its root position
Noticed that sortchanged
event does not work as expected, it is not fired when subelement order changes.
I propose you to propagate subtree's sortchanged event using $.trigger to the outermost sortable.
As a workaround my ajax plugin saves the ordering on sortstop
, it just a bit hackish as the saving must be done even when no changes is done.
Hello,
I've just tryed nestedSortable with jQueryUI 1.9.1 and it has some problems, shivering is much worse than in 1.9.0, sometimes there is even imposible to move some items inside some nodes. Can someone check compatibility with 1.9.1?
I think, this plugin should be more event. eg (draggable, droppable,...).
Hi,
I can implement nestedSortable in my php webpage, and I understand that there are 3 ways being serialize, toArray and toHierarchy for outputing the structure data.
Actually, I would like to include more parameters like text field and status to the output, is it possible for me to modify any one type of above to achieve the task? Thanks!
With the latest jQuery UI, it appears change is the correct usage, not onChange.
Hi,
When dragging a
clone
) instead of being moved?This plugin is not work on pre population data. I am passing the HTML format from PHP and take the jQuery for pre population.
I'm using the 'develop' branch and if rootID is null, then when it gets serialized, it will return "null" as a string, rather than an empty string. This causes problems with MySQL where it interprets the string 'null' for an integer field as invalid and sets it to '0'. My parent_id field gets set to '0' in the database instead of (sql's) NULL.
If it just returns the empty string when rootID is null instead, it will fix it, ie replacing
o.rootID
with
o.rootID?o.rootID:''
everywhere in the file.
This is amazing btw. it works great.
Not sure if it is only me or not but it fails on IE (I use 9 for this test) when combine with jQuery-ui-1.8.2, works for everything in firefox and chrome. maybe it is an IE issue. when I change the UI to 1.8.11, it works on UI.
Thank you very much for this. I really appreciate it.
Hey,
jquery ui seems to be quite a huge load and it often has errors. I do not know if this is possible, but maybe the nestedSortable could be ported to html5?
jQuery UI gives this error when I load the script: Cannot read property 'left' of null
How does my js look?
$(document).ready(function () {
$('.project-wizard').nestedSortable({
handle: '.inner-wrap',
items: 'li',
toleranceElement: '.inner-wrap',
listType:'ul'
});
});
Hello,
Sorry, I cannot understand what is the meaning of left and right in the following codes:-
setName[n] =>
{
'item_id': itemId,
'parent_id': parentId,
'depth': depth,
'left': left,
'right': right,
}
what do they want? Thanks!
In the documentation the isAllowed
function has parameters of item
and parent
. I can't tell if parent
means the new parent item that I'm trying to move the item under, or if it is the parent that the item originally originated from.
Is there anyway to make this work with lists that are displayed using a mixture of horizontal and vertical lists? Basically I am trying to make a standard dropdown menu sortable.
I set all the dropdowns to be visible and then want the user to be able to drag elements in and out of the toplevel and in and out of the dropdowns- exactly like your demo but with the top level displayed horizontally. jQ-ui sortable almost does this out of the box actually, you can sort the drop downs, elements in the drop downs and drag elements from one drop down to another, what you cant do is drag things from the drop down to the top level or drag a sub menu element to be the sub element of a top level that doesn't already have child elements- both of which yours does do- but I cant see a way to make it work with a horizontal top level.
This is jQ ui sortable and you can see its just about there but missing your features http://jsfiddle.net/Gdadu/22/
Here is the js https://gist.github.com/4001049
Here is the html https://gist.github.com/4001070
The js is loaded in the folowing sequence:
jquery.js v.1.8.2
jquery-ui.js v.1.8.23
jquery.nestedSortable.js v.2.0
pages.js
The error is:
Error: cannot call methods on nestedSortable prior to initialization; attempted to call method 'option'
The error is triggered when I try to drag an item.
Hi
I have three questions
How can i restrict child moving to other parent .
Should only drag and drop in their nest just for position change .
The child should restrict to become root or parent.
Hi guys,
when pre-populating my nested list with sub-elements, they are not moveable. Instead, the parent element is moved instead.
See here: http://jsfiddle.net/gcWQQ/3/
Any hints for me???
Best regards,
Peter
I don't know if this is an limitation of html and integers as id's attribute.
The problem is when I set the id attribute as id="2" in html, It returns the error:
Uncaught TypeError: Cannot read property '2' of null
Workaround was to prefix it with some text just like in the example.
Hi,
after upgrading to jquery-ui 1.9.2, I get this message when trying to load nestedsortable:
$.widget.extend is not a function
I've googled a bit about it and it seems like this message happens when UI has been loaded twice but I don't see a double load and the problem only occurs with nestedsortable.
Can you help me to solve it?
Thanks!
When setting the 'scroll' option to false, _mouseDrag fails because of scope issue. The fix is quite simple, just set the value for 'o' variable one block higher :
l54 :
}
var o = this.options; // <- this should be here
//Do scrolling
if(this.options.scroll) {
var scrolled = false;
We have large tree, like to expand nodes on click on a icon, is it possible to implement this?
"isAllowed" method just have access to the "parentItem" (the drop target) and the misleadingly nammed "item" which in fact is not the item being dropped, but the placeholder.
This limit greatly the usefullness of this method...
Static constraints can already be declared using "disableNesting" and "maxLevels", therefore the real use of "isAllowed" is expressing dynamic, context-dependant constraints.
By providing only the placeholder and the parent node you give user a small part of the context (the drop position in a given childList) which (IMHO) is of little help. By also providing "currentItem" the user could write constraints depending on the nature of the item being dropped, ex :
Leaf node of type A can only be appended to node of type B and D
Using: jQuery 1.7.2, jQuery UI 1.8.18, jQuery Nested Sortable 1.3.5.
Can't customize the look of a placeholder to drop the item/
It seems that its behavior has been changed. Now it gives markup like this:
<li class="ui-sortable-placeholder" style="visibility:hidden; height:24px;" >
So even if I use that class in the css, it would not show up.
There must be some way to overcome it.
Both methods look for 'li' as a childrens of options.listType instead of options.items
When dragging an item down out of view, the page does not scroll.
My lists is contained inside an absolute positioned div.
Jquery sortable works on iOS and other touch platforms when paired with TouchPunch, but this doesn't. Any leads?
I'm using nestedSortable for a simple workflow designer. We have a draggable list of items that serve as templates for types of workflow steps. One workflow step is a boolean branch (do this if true, do that if false). My draggable template looks like the following:
<li class="ui-state-highlight draggable blue no-nest">
<div class="title">
Boolean
<div class="button" onclick="$(this).parent().parent().remove();">X</div>
</div>
<ol class="cases">
<li class="ltblue"><div class="title">True</div><ol></ol></li>
<li class="ltblue"><div class="title">False</div><ol></ol></li>
</ol>
</li>
The addition of the "no-nest" class on the LI tag keeps other steps from being added at the same level as the True and False templates when one is pulled into the sortable list. However, the True and False nodes are themselves still sortable...meaning I can pull the entire True structure out to a different level where it breaks my workflow rules (each Boolean step must have a True and a False child).
Any idea how I can lock those children in place, like through the use of a CSS class? Something like "no-move"?
BTW, this is one of the coolest, simplest jQuery projects I've ever seen...love it!
Hi!
I spent last hour wondering why the hell it doesn't work, my browser (Chrome beta) freezed literally. And the reason? Default list type is ol
not ul
. If I try to use $("ul.sortable").nestedSortable
it just freezed.
Ways to fix this:
jQuery("<ul></ul>").get(0).nodeName
...Hi there, using jquery ui 1.8 and jquery 1.7 (same thing you used in your demo page).
I posted the question to stack overflow: http://stackoverflow.com/questions/13885514/jquery-ui-nested-sortables-all-nested-lists-items-count-as-one-item-off-the-roo
Seems like the
There are JSfiddle links in the SO question too. Any idea on what's causing the problem?
Thanks and AWESOME plugin btw, wish the UI folks would integrated it into the build!
Hi
First of all, thanks for your great plugin!
The toArray method has a problem.
Only the first item receive the depth of 0 (but there are many others with a depth of 0). I've tested it on my own items, and I have the same problem.
l '0' ... 'item_id' ... 'parent_id' => "none" 'depth' => "0" 'left' => "1" 'right' => "22"
see demo: http://mjsarfatti.com/sandbox/nestedSortable/
Empty OL /UL lists are not cleared after a movement.
After futher investigation it seems that the actual moving element is still in that OL/UL, along with his helper.
I'm using:
jquery 1.8.1 (google cdn)
jquery ui 1.8.23 (google cdn)
It happens at least in Firefox (10.x) and Chrome (22.x)
It seems to me that the _clearEmpty function is not working properly.
When you add :
if (emptyList.length && !emptyList.children().length) {
emptyList.remove();
} else {
console.log(emptyList);
}
// EXAMPLE OUTPUT
[<ol></ol>]
It will print an empty <ol></ol>
When using
if (emptyList.length && !emptyList.children().length) {
emptyList.remove();
} else {
console.log(emptyList.html());
}
// EXAMPLE OUTPUT:
<li id="list_10" style="display: none; "><div class="node">Item 5</div></li><li id="list_10" style="display: list-item; width: 200px; height: 22px; position: absolute; opacity: 0.6; z-index: 1000; left: -13px; top: -2px; " class="ui-sortable-helper"><div class="node">Item 5</div></li>
It prints the old item in it's old place with its helper.
I tried several things to let the empty lists being removed.
The only solution this far was copying the whole _clear function from the ui.sortable and add at the end :
// Clean last empty ul/ol
for (var i = this.items.length - 1; i >= 0; i--) {
var item = this.items[i].item[0];
this._clearEmpty(item);
}
But I think this is not the way to do it.
Greetings
Hi mjsarfatti, first of all great work! Thanks.
Now the issue:
I've used the option (connectWith: ".connectedSortable") that enables two sortable lists to share sortable elements, according to: jQuery UI Doc.
The code that I used was:
<ol id="sortable1" class="connectedSortable">
<li><div>sortable1 1</div></li>
<li>
<div>sortable1 2</div>
<ol>
<li><div>sortable1 2.1</div></li>
<li><div>sortable1 2.2</div></li>
</ol>
</li>
<li><div>sortable1 3</div></li>
</ol>
<ol id="sortable2" class="connectedSortable">
<li><div>sortable2 1</div></li>
<li>
<div>sortable2 2</div>
<ol>
<li><div>sortable2 2.1</div></li>
<li><div>sortable2 2.2</div></li>
</ol>
</li>
<li><div>sortable2 3</div></li>
</ol>
<script>
$(document).ready(function(){
$('#sortable1, #sortable2').nestedSortable({
handle: 'div',
items: 'li',
toleranceElement: '> div',
maxLevels: 2,
connectWith: ".connectedSortable"
});
});
</script>
The thing is.
Elements that already have children ("sortable1 2" and "sortable2 2") work fine, but the ones that didn't have a child in the first place ("sortable1 1", "sortable1 3", "sortable2 1", "sortable2 3"), don't accept new ones.
I can see that by dragging an element hover these elements ("sortable1 1", "sortable1 3", "sortable2 1", "sortable2 3") that the <ol></ol>
that should contain the child elements is being created, but with no content in it and when I drop the element, the <ol></ol>
disappears.
Can you help me with this Manuele?
Thanks again, and keep up the good work :D
John.
I just downloaded your dev branch....
the isAllowed() callback should pass the item being moved as per what the documentation says. However, what it gets is the parent container and the placeholder.
If you modify _isAllowed() to pass this.currentItem[0] as the first parameter (and shift other parameters over), then this should allow one to see not just where we're moving to but what the item is. In my case, I have a tree of 'pages' and want to sort the items within a given sublist/branch, but not allow the parents to change.
Without knowing what item is being moved, it's impossible to know if the drop location is a different parent or not.
on line 271 is the following code:
$(item).parent(o.listType).parent('li').attr('id')
It grabs the id from the parent item, however the id doesn't always have to be inside the HTML id attribute (as taken into account when selecting the item id on line 266):
$(item).attr(o.attribute || 'id')
In order for users to pass their own attribute without getting a "can not call match() on undefined" error the piece of code on line 271 that I showed needs to change to:
$(item).parent(o.listType).parent('li').attr(o.attribute || 'id')
Looking at the example on http://mjsarfatti.com/sandbox/nestedSortable/
Basically, I would like to constrain the subitems to only be orderable within their parent item.
So in the example, "Sub Item 1.1" and "Sub Item 1.2" can only be interchanged, but cannot be placed anywhere else.
I was trying to make use of the isAllowed function, but apparently this plugin strips away data tags from the li element. (I added data-parent attributes.)
First of all, I really like this plugin! Great work.
There is a bug in the toArray method wich makes left and right values go wrong. This happens because the root node is counted twice in the current situation. The fix is to skip the root node and start counting with the children of the first list item.
Current situation line 289:
$(this.element).children(o.items).each(function () {
New situation line 289:
$( this.element ).first( 'li' ).children('li').each(function () {
Can this be made to navigate and sort by keyboard and audio?
Using the "key" argument for the .serialize method results in a string with no array indices.
Line 228 from the master branch should be changed from
str.push((o.key || res[1] + '[' + (o.key && o.expression ? res[1] : res[2]) + ']')
to
str.push(((o.key || res[1]) + '[' + (o.key && o.expression ? res[1] : res[2]) + ']')
I'm completely new to github so I'll try to submit a bugfix/pull request, but if I don't manage to do that in a reasonable amount of time, I'm leaving this here for reference.
i want my customization in such a way that in my view if i have my tree structure of only Top level nodes and if i click on any of the top level node then it should be expanded which would be having all of its child and sub-child nodes.please advice.....
When I set disableNesting: 'file'
, it properly disables the specified class, but it doesn't disable the drop zone, leading to some very confusing user experience. Is there any way to disable a certain type of element AND disable its drop zone?
Dragging a item accross rows adds follow code between the rows:
<li class="item ui-sortable-placeholder" style="visibility: hidden; "></li>
But it doesn't move them after a drop and the list is not draggable after that anymore at all.
This seems to occur when you cross to a sublist.
Please see the short attached video showing this issue:
In IE7, or IE8 / 9 in compatibility mode, the size of the placeholders is not the same as the size of the li being moved. It's much smaller in height, around 15px high.
Even if the li being moved has a nested list, making it's height very large, the placeholder remains ~15px high.
Issue can be replicated on the sandbox:
http://mjsarfatti.com/sandbox/nestedSortable/
As soon as I try to use your plugin for an
I found an error in the latest update in the development branche. There is a ) missing on line 233 of query.mjs.nestedSortable.js.
Current situation:
New situation:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.