ilikenwf / nestedsortable Goto Github PK

hi,
be possible that li not leave the parent div that includes them.

thank you

Is it currently possible to serialize more data than the id's of li's ?

For example, I have this tree:

<ol>
    <li id="item1">
        <div id="item2">
        </div>
        <div id="item3">
        </div>
    </li>
</ol>

And I want id's of both the li and div to show in the serialize output.
The documentation is not entirely clear, some parameters are not explained (such as "items").

in the end of _mouseStop: function(event, noPropagation) {
add
this._trigger("complete", event, this._uiHash());

I tried to use 'relocate' events. But it never fired.
Instead I used 'stop' event callback. It works.
I found it on http://stackoverflow.com/questions/11783494/jquery-nested-sortable-and-javascript
But in docs nothing said about this event, may be should add this event to list.

Is this no longer on Atmosphere?

While adding package ilikenwf:nested-sortable:
error: no such package

if possible please provide expandAll and collaspeAll functionality

For each floated element inside the item's <li> element, a small amount of height is added to the placeholder, making it bigger than it needs to be.

Options used are the following:

    $('ol.sortable').nestedSortable({
        forcePlaceholderSize: true,
        handle: 'div',
        helper: 'clone',
        items: 'li',
        opacity: .6,
        placeholder: 'placeholder',
        revert: 250,
        tabSize: 25,
        tolerance: 'pointer',
        toleranceElement: '> div',
        protectRoot: true,
        disableParentChange: true,
        isTree: true,
        startCollapsed: true
    });

When I drag a leaf node to any location, it automatically expands all collapsed branches. When I try to revert to the old _clearEmpty, everything works as expected.

Here is the old _clearEmpty:

_clearEmpty: function(item) {
            var o = this.options;

            var emptyList = $(item).children(o.listType);

            if (emptyList.length && !emptyList.children().length && !o.doNotClear) {
                o.isTree && $(item).removeClass(o.branchClass + ' ' + o.expandedClass).addClass(o.leafClass);
                emptyList.remove();
            } else if (o.isTree && emptyList.length && emptyList.children().length && emptyList.is(':visible')) {
                $(item).removeClass(o.leafClass).addClass(o.branchClass + ' ' + o.expandedClass);
            } else if (o.isTree && emptyList.length && emptyList.children().length && !emptyList.is(':visible')) {
                $(item).removeClass(o.leafClass).addClass(o.branchClass + ' ' + o.collapsedClass);
            }

        }

I wonder if anyone is having the same issue as I am.

if I have a tree like
root

• node 1
  -- node 2
• node 3

and I move node 2 out of node 1, and into node 3, relocate does not fire. If I move it to root, then node 3, it'll fire each time properly, just not when the nod level is the same.

So I need to dynamically insert child nodes to the structure and I am using the isTree setting and it is 'true'. While correct classes are assigned when first initialise and as I started a drag, but it is not doing so when I have inserted the code using DOM manipulation. For example, a leaf node added with a child node will not into a branch and vise versa.

For now I can patch up the missing classes behavior by writing my own check function but that's too patchy. Hope this can be fixed it in the close future.

When in dragable item there is a Twiiter Bootstrap dropdown, which contains ul >li, plugin fails with message " Uncaught TypeError: Cannot read property 'left' of undefined "

Basically some of my users of my menu using this have been met with confusion that they cannot drag and drop directly on a category name for it to go inside of it. Basically the branch would need to be droppable and accept dragged items. I have it so hovering expands it but this it would still be nice to accept dropping on the category to put it either at the top or bottom of the list.

Just tested the demo page. http://ilikenwf.github.io/example.html Seems to work great in IE8 no matter what I dragged and where, including the custom method buttons.

Congrats 👍 awesome work!

Please provide example using angularjs...
it is very usefull....

is it possible to send additional data to server when using toArray method?

disableParentChange not working in the root of the hierarchy, i have set this property to true, cause i don't want that children of a hierarchy change form its parents, but when i move the first level of li elements the plugin is reverting the movements. this does not happen with the second level hierarchy.

Is there something wrong im doing, here is the initialization code:

$('.nestedSortable').nestedSortable({
            placeholder: "sort-highlight",
            handle: 'div.sortable',
            items: 'li',
            toleranceElement: '> div.sortable',
            disableParentChange : true,
            revert: function(event, ui) {
                var contentHtml = '<div class="alert alert-warning alert-dismissable">'+
                                        '<i class="fa fa-warning"></i>'+
                                        '<b>Nota:</b> No es permitido mover una subcategoria fuera del padre actual, para esto debe eliminarla y crearla dentro del nuevo padre. '+
                                    '</div>';
                $('#InformationModal div.modal-body').html( contentHtml );
                $('#InformationModal').modal();
            },
            relocate: function(event, ui){
                if( ui.item.parent().parent().attr('name') === 'root' ){
                    //guardar la jerarquia root
                    saveSortedRoot();
                }else{
                    //guardar la jerarquia hijos
                    saveSortedCategory( ui.item.parent().parent() );
                }
            }
        });

here is the html

<ol id="HierarchyCategoriesList" class="nestedSortable">
   <li style="cursor:move" category-id="5">
      <div class="sortable categories-sortable">
         <span><i class="fa fa-ellipsis-v"></i>&nbsp;<i class="fa fa-ellipsis-v"></i>&nbsp;</span>&nbsp;Computadoras<button class="btn pull-right" data-widget="ol-collapse" style="padding: 0px 4px;"><i class="fa fa-minus"></i></button>
         <badge></badge>
      </div>
      <ol>
         <li style="cursor:move" category-id="20">
            <div class="sortable categories-sortable">
               <span><i class="fa fa-ellipsis-v"></i>&nbsp;<i class="fa fa-ellipsis-v"></i>&nbsp;</span>&nbsp;PC<button class="btn pull-right" data-widget="ol-collapse" style="padding: 0px 4px;"><i class="fa fa-minus"></i></button>
               <badge></badge>
            </div>
            <ol></ol>
         </li>
         <li style="cursor:move" category-id="7">
            <div class="sortable categories-sortable">
               <span><i class="fa fa-ellipsis-v"></i>&nbsp;<i class="fa fa-ellipsis-v"></i>&nbsp;</span>&nbsp;Laptop<button class="btn pull-right" data-widget="ol-collapse" style="padding: 0px 4px;"><i class="fa fa-minus"></i></button>
               <badge></badge>
            </div>
            <ol></ol>
         </li>
      </ol>
   </li>
   <li style="cursor:move" category-id="12">
      <div class="sortable categories-sortable">
         <span><i class="fa fa-ellipsis-v"></i>&nbsp;<i class="fa fa-ellipsis-v"></i>&nbsp;</span>&nbsp;Aires acondicionados<button class="btn pull-right" data-widget="ol-collapse" style="padding: 0px 4px;"><i class="fa fa-minus"></i></button>
         <badge></badge>
      </div>
      <ol></ol>
   </li>
   <li style="cursor:move" category-id="2">
      <div class="sortable categories-sortable">
         <span><i class="fa fa-ellipsis-v"></i>&nbsp;<i class="fa fa-ellipsis-v"></i>&nbsp;</span>&nbsp;Electrodomesticos<button class="btn pull-right" data-widget="ol-collapse" style="padding: 0px 4px;"><i class="fa fa-minus"></i></button>
         <badge></badge>
      </div>
      <ol>
         <li style="cursor:move" category-id="6">
            <div class="sortable categories-sortable">
               <span><i class="fa fa-ellipsis-v"></i>&nbsp;<i class="fa fa-ellipsis-v"></i>&nbsp;</span>&nbsp;Televisores<button class="btn pull-right" data-widget="ol-collapse" style="padding: 0px 4px;"><i class="fa fa-minus"></i></button>
               <badge></badge>
            </div>
            <ol></ol>
         </li>
      </ol>
   </li>
   <li style="cursor:move" category-id="11">
      <div class="sortable categories-sortable">
         <span><i class="fa fa-ellipsis-v"></i>&nbsp;<i class="fa fa-ellipsis-v"></i>&nbsp;</span>&nbsp;Refiregeradores<button class="btn pull-right" data-widget="ol-collapse" style="padding: 0px 4px;"><i class="fa fa-minus"></i></button>
         <badge></badge>
      </div>
      <ol></ol>
   </li>
</ol>

Using the default example - how would you convert the toArray function to produce a useable php array?

if jquery 2.x.x being used instead of 1.11 , once you change menus position for the first time and then click hierarchy on example page , browser will hang up ,but if click hierarchy once page loaded without repositioning any menu on the page , no problem will be seen , and after that you can reposition menus on the page.
this issue is only with hirerarchy but not serialize or array. i appreciate any help

Hi,
can you update your example with events as well.Cant seem to make them to work

Hi,
Is is possible to update options like maxLevels , disableParentChange etc on initialized nestedSortable ?
So new changes are implemented on the fly ?

From DrSchizo : One nice addition would be to pass as arguments of the relocate function the new and the old position of the item. For instance, my script is saving the new location in real time, and not only after clicking on a "save" button. I managed to do it by exporting the toArray output and comparing it with a saved version, but it could have been not much easier to do, especially since the previous and current index and parent id should be retrieved in the script just before triggering the relocate event (at least, once the bug will be fixed).

When I download nestedSortable through bower, I get the old repo by mjsarfatti. Could this be fixed?

Could you add an event that fires once when an item is picked up?
Preferably with a way to save the item id that is currently being dragged.

With this it would be a ton easier to determine exactly which item was dragged where, opposed to comparing the before and after serialized strings.

When dragging, the maxLevels property is exceeded, so the user might think that (maxLevels+n) levels deep is allowed. However, on release, the draggable element reverts.

I've set isTree: true and startCollapsed: true. So all items are collapsed.
I'd like to suggest to show the + icon when there is actually something to expand.

Btw: isTree: true only does something when startCollapsed: true. Everything is then collapsed.
I can't help thinking there is some optimization possible ;-)

Any documentation or demos for dynamically adding items with working event handlers? For instance adding a list item with delete?

In my case I need to be able to add and remove nodes, that being said I need to be able to monitor moves on said nodes, it seems like watching relocate only fires on original nodes and not added nodes. Is there a refresh I can run or can the binds be moved to root object and use on instead?

Or am I just adding wrong? I'm using append to the node I want to add to.

The problem looks like only happen when the list is in a div with scroll bar try to move the last section to the top of the list sometimes work sometimes does not work:
http://jsfiddle.net/blodia/axh34abp/7/

I'm using this code on my Project here. It's using meteor to run though.
The problem is when I'm moving object and want to drop it.
Here I'm dragging it to be a child of 'besi'.
As you can see the placeholder is not showing.
But, if I drag it a bit under 'besi' parent the placeholder start showing.
The placeholder show up and if I drop it, it would be placed on the intended place.
The online deployed meteor can be visited here.
I guess this is happen because it's made for vertical list though. Is there a workaround for this? Thank you...

Hey :)
If i keep dragging around, opening and closing groups.

I will eventually end up with the this error

Uncaught TypeError: Cannot read property 'left' of undefined
$.widget.refreshPositions
(anonymous function)
(anonymous function)
$.widget._mouseStart
(anonymous function)
(anonymous function)
$.widget._mouseMove
(anonymous function)
(anonymous function)
_mouseMoveDelegate
n.event.dispatch
r.handle

Got a workaround for the bug? :)

You can never move an item to the top of the last child in a nest. For example:

[L1 A]
  [L2 A]
  [L2 B]
[L1 B]
  [L2 C]
  [L2 D]

L2 B can not be moved to a position at the top of L1 B's children. Neither can [L2 D] be moved above [L2 C], though [L2 C] can be moved below [L2 D].

In general, it is very, very difficult to get a dragged item to stick in the last child of any nest.

When trying to access the create method that leaves a bug. In the old version were methods: "enable/disable" that are currently not working.

$('ol.sortable').nestedSortable('create'); # is error
$('ol.sortable').nestedSortable('destroy'); # is work

Error: cannot call methods on nestedSortable prior to initialization; attempted to call method 'create'


throw new Error( msg );

i'd like to load data on demand using ajax, unfortunately it doesn't work as expected.
there should somekind of .rebind() function .. i already tried .unbind().nestedSortable() but has no effect .. any ideas?

Hi,

Not really an issue bug can you add bower support for your project. Thanks. :)

I've created a JSFiddle here.
When you drag Item 1.1 as child to Item 2, it does not trigger the "relocate" event.

It does, however, when you change the order of Item 2.1 to below Item 2.2.

It seems to be in this section:

if (!(this._pid_current === this._uiHash().item.parent().parent().attr("id") &&
    this._sort_current === this._uiHash().item.index())) {
    this._trigger("relocate", this._relocate_event, this._uiHash());
}

I honestly have no clue what this if statement is supposed to do, or mean, so I'm a bit afraid to touch it.
Any chance you can look into this?

Great library otherwise.

TypeError: null is not an object (evaluating 'parentItem')   '_recrusiveArray - jquery.mjs.nestedSortable.js:786'

I have a different attribute, I'm using data-id instead of id, but I tried using id to test and it still happened. data-id it an int, not sure if that is an issue? My root element is data-id: 1, so i set options for rootID: 1, but same error with or without it.

again am I just doing something wrong or is this a bug? I'm new to this plugin and still trying to work things out a little.

First of all, thanks for continuing development!

Suggestion:
Do not toggle the + and - icons when there is nothing to expand.
Leave it at - or maybe some other icon.

As it is, clicking on the - icon changes the - icon to a + icon and the parent <li> gets both collapsed and expanded classes added...?

Not sure where you UI widgets are located, but this dependency is causing problems for me "jquery-ui/sortable". I have full jQuery UI loaded in a global scope, so I have to work around this dependency by creating an empty module.

Hi I'd like to ask a question please.

I'm using the nestedSortable plugin in order to move nodes in my tree. My tree looks like this http://ftp.nchu.edu.tw/MySQL/tech-resources/articles/hierarchical-data-4.png , so my root node (Electronics) has always left == 1 and right == 20 (or any max value). When I hit my 'save' button the toArray returns one extra item (supposed as root) and breaks my tree structure, i.e. it gets the left and right values of my root (Electronics) and my root becomes a child node.

How can I fix this, so that the extra item of the toArray will get always the same left and right values as my root and don't brake the tree?

Instead of exporting the full string, toHierarchy only takes the last part of an id with hyphens. For example:

<li id="item-1">Item 1<li>

is exported as

id: "1"

instead of

id: "item-1"

thanks for great plugin. by enabling RTl support ,menu movement would have an unnormal and fast move (or shadow) but it is smooth in RTl disabled.
please give it a try in rtl mode

Hi, there is no stop event being triggered by your plugin. When I say stop, I mean, the user has let go of their mouse. In your case it seems that you take over with some animation and make the stop event happen after the animation is complete, but is it possible to have an event that triggers as soon as the user lets go of their mouse?

Hi,
I think there should be an option if you want to force that users can make a item child by dragging them right and so on.
This is helpful in situation where you have just groups at root level , max-depth=2 , and you only want user to sort groups or sort items between groups. In such case if user was dropping items fast , most of items would get reverted because users pulled mouse too Right and because of max depth=2, items got reverted. I got lots of complaints because of this from users.

Hello

I'm trying to change classes of elements but i can't even see default classes.

I'm documentation example :

    <ul class="sortable">
        <li><div>Some content</div></li>
        <li>
            <div>Some content</div>
            <ul>
                <li><div>Some sub-item content</div></li>
                <li><div>Some sub-item content</div></li>
            </ul>
        </li>
        <li><div>Some content</div></li>
    </ul>

        $('.sortable').nestedSortable({
            listType: 'ul',
            handle: 'div',
            items: 'li',
            toleranceElement: '> div',
            expandedClass: 'expandedClass',
            tabSize: 20,
            branchClass: 'branchClass',
            collapsedClass: 'collapsedClass',
            disableNestingClass: 'disableNestingClass',
            errorClass: 'errorClass',
            expandedClass: 'expandedClass',
            hoveringClass: 'hoveringClass',
            leafClass: 'leafClass',
            disabledClass: 'disabledClass'
        });

On console i see this:

   <ul class="sortable ui-sortable">
        <li><div class="ui-sortable-handle">Some content</div></li>
        <li>
            <div class="ui-sortable-handle">Some content</div>
            <ul>
                <li><div class="ui-sortable-handle">Some sub-item content</div></li>
                <li><div class="ui-sortable-handle">Some sub-item content</div></li>
            </ul>
        </li>
        <li><div class="ui-sortable-handle">Some content</div></li>
    </ul>

Any ideas what might be wrong? I'm using version 2.0 alpha

when a parent(class = list_16) removes a child(class = list_15) ol tag is not removed and remains empty.

When dragging a node into the root, the param placeholderParent of the isAllowed option comes as undefined, and thus it cannot be used to check for business logic (certain items cannot be at root, for example).

isAllowed: function (placeholder, placeholderParent, currentItem) {
    console.log(placeholder, placeholderParent, currentItem);
}

Hi,
when nestedSortable used with r.js requirejs optimizer i get an error:

Mismatched anonymous define() module

Quick workaround is to delete line 16 where local variable define has been defined:

var define = window.define;

Hi,

Thank for this great script!

Unfortunately, the "relocate" event doesn't seem to work in the following code:

$("ol.sortable").nestedSortable({
change: function(){
console.log("change");
}
relocate: function(){
console.log("relocate");
}
});

The change event is triggered, but not the relocate one.

If I look into the code on line 406, it is because pid is equal to this._uiHash().item.parent().parent().attr("id")

I tried it on the example provided (on example.html, by replacing "change" by "relocate" in the option) so it doesn't look like it is a configuration mistake.

Thanks a lot

Hi,
I have a little problem with jumping items in Chrome. It appears when the window is little scrolled down. When I try to drag item and move, it jumps up and the whole page moves little down.
Here si the screenshot: http://web.php5.sk/fora/nestedSortable.png
and the sample of code: http://web.php5.sk/DROM.php

jquery is 1.11.1
jquery_ui 1.11.2
nestedSortable 2

Can you help me please?