Coder Social home page Coder Social logo

nestedsortable's Introduction

nestedSortable jQuery plugin

If you would like to help update/maintain or take over this project, please open an issue to let me know. I don't use this project anymore.

nestedSortable is a jQuery plugin that extends jQuery Sortable UI functionalities to nested lists.

Meteor Installation

meteor add ilikenwf:nested-sortable

What's new in version 2.0

The biggest change is that your nested list can now behave as a tree with expand/collapse funcionality. Simply set isTree to true in the options and you are good to go! Check the demo out to see what can be done with nestedSortable and a little CSS. (Note that all nestedSortable does is to assign/remove classes on the fly)
Also:

  • isAllowed function finally works as expected, see the docs below
  • Fixed: a small bug in the protectRoot function
  • Changed: no drop zone will appear at all if you try to nest an item under another one that has the no-nesting class.
  • Added: doNotClear option to prevent the plugin from deleting empty lists

Features

  • Designed to work seamlessly with the nested set model (have a look at the toArray method)
  • Items can be sorted in their own list, moved across the tree, or nested under other items.
  • Sublists are created and deleted on the fly
  • All jQuery Sortable options, events and methods are available
  • It is possible to define elements that will not accept a new nested item/list and a maximum depth for nested items
  • The root level can be protected
  • The parentship of items can be locked, just as if it was a family tree.

Usage

<ol class="sortable">
	<li><div>Some content</div></li>
	<li>
		<div>Some content</div>
		<ol>
			<li><div>Some sub-item content</div></li>
			<li><div>Some sub-item content</div></li>
		</ol>
	</li>
	<li><div>Some content</div></li>
</ol>
$(document).ready(function() {

	$('.sortable').nestedSortable({
		handle: 'div',
		items: 'li',
		toleranceElement: '> div'
	});

});

Please note: every <li> must have either one or two direct children, the first one being a container element (such as <div> in the above example), and the (optional) second one being the nested list. The container element has to be set as the 'toleranceElement' in the options, and this, or one of its children, as the 'handle'.

Also, the default list type is <ol>.

This is the bare minimum to have a working nestedSortable. Check the demo out to see what can be accomplished with a little more.

Custom Options

disableParentChange (2.0)
Set this to true to lock the parentship of items. They can only be re-ordered within theire current parent container.
doNotClear (2.0)
Set this to true if you don't want empty lists to be removed. Default: false
expandOnHover (2.0)
How long (in ms) to wait before expanding a collapsed node (useful only if isTree: true). Default: 700
isAllowed (function)
You can specify a custom function to verify if a drop location is allowed. Default: function (placeholder, placeholderParent, currentItem) { return true; }
isTree (2.0)
Set this to true if you want to use the new tree functionality. Default: false
listType
The list type used (ordered or unordered). Default: ol
maxLevels
The maximum depth of nested items the list can accept. If set to '0' the levels are unlimited. Default: 0
protectRoot
Whether to protect the root level (i.e. root items can be sorted but not nested, sub-items cannot become root items). Default: false
rootID
The id given to the root element (set this to whatever suits your data structure). Default: null
rtl
Set this to true if you have a right-to-left page. Default: false
startCollapsed (2.0)
Set this to true if you want the plugin to collapse the tree on page load. Default: false
tabSize
How far right or left (in pixels) the item has to travel in order to be nested or to be sent outside its current list. Default: 20
excludeRoot
Exlude the root item from the toArray output

Custom Classes (you will set them in the options as well)

branchClass (2.0)
Given to all items that have children. Default: mjs-nestedSortable-branch
collapsedClass (2.0)
Given to branches that are collapsed. It will be switched to expandedClass when hovering for more then expandOnHover ms. Default: mjs-nestedSortable-collapsed
disableNestingClass
Given to items that will not accept children. Default: mjs-nestedSortable-no-nesting
errorClass
Given to the placeholder in case of error. Default: mjs-nestedSortable-error
expandedClass (2.0)
Given to branches that are expanded. Default: mjs-nestedSortable-expanded
hoveringClass (2.0)
Given to collapsed branches when dragging an item over them. Default: mjs-nestedSortable-hovering
leafClass (2.0)
Given to items that do not have children. Default: mjs-nestedSortable-leaf
disabledClass (2.0)
Given to items that should be skipped when sorting over them. For example, non-visible items that are still part of the list. Default: mjs-nestedSortable-disabled

Custom Methods

serialize
Serializes the nested list into a string like setName[item1Id]=parentId&setName[item2Id]=parentId, reading from each item's id formatted as 'setName_itemId' (where itemId is a number). It accepts the same options as the original Sortable method (key, attribute and expression).
toArray
Builds an array where each element is in the form:
setName[n] =>
{
	'item_id': itemId,
	'parent_id': parentId,
	'depth': depth,
	'left': left,
	'right': right,
}
It accepts the same options as the original Sortable method (attribute and expression) plus the custom startDepthCount, that sets the starting depth number (default is 0).
toHierarchy
Builds a hierarchical object in the form:
'0' ...
	'id' => itemId
'1' ...
	'id' => itemId
	'children' ...
		'0' ...
			'id' => itemId
		'1' ...
			'id' => itemId
'2' ...
	'id' => itemId
Similarly to toArray, it accepts attribute and expression options. Optionally adding `data-` attributes will cause them to show up in the hierarchy. See demo for example.

Events

change
Fires when the item is dragged to a new location. This triggers for each location it is dragged into not just the ending location.
sort
Fires when the item is dragged.
revert
Fires once the object has moved if the new location is invalid.
relocate
Only fires once when the item is done bing moved at its final location.

Known Bugs

nestedSortable doesn't work properly with connected draggables, because of the way Draggable simulates Sortable mouseStart and mouseStop events. This bug might or might not be fixed some time in the future (it's not specific to this plugin).

Requirements

jQuery UI Sortable 1.10+ (might work with 1.9, but not tested)

Browser Compatibility

Tested with: Firefox, Chrome
NOTE: This is still an alpha version, please test thoroughly in whichever version of IE you target

License

This work is licensed under the MIT License.
Which means you can do pretty much whatever you want with it.

nestedsortable's People

Contributors

ajmeese7 avatar amin101 avatar andyp22 avatar bananattack avatar bfcoder avatar boekkooi avatar cameronprattedwards avatar cchanibal avatar dangoodman avatar danielevans avatar dustinbolton avatar fonclub avatar gregshutt avatar hermessbicego-laser avatar ilikenwf avatar jeffreymb avatar levacic avatar michamilz avatar mjsarfatti avatar noraheuer avatar nytrm avatar o2-web avatar poscar avatar rihardsmtc avatar ste-camp avatar themepixels avatar twicejr avatar vcarel avatar vsn4ik avatar zdienos avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nestedsortable's Issues

Start drag event with current item id

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.

[relocate event] to be able to pass arguments of the relocate function the new and the old position of the item.

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).

What happened to meteor?

Is this no longer on Atmosphere?

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

isAllowed returns undefined for placeholderParent when dragging into root

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);
}

Dragging elements causes collapsed branches to expand automatically

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.

Relocate event doesn't seem to work

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

Error when using toArray

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.

Bower support

Hi,

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

Change Dropping Behavior

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.
1 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.
2 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...

add complete event

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

nestedSortable with rjs

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;

Dynamically Add Items

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

Relocate event does not fire on parent change

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.

toArray adds one extra item

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?

Serialize more than li ID's

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").

Cannot read property 'left' of undefined

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? :)

Events not bound to root object?

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.

Stop Event

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?

AMD mod sortable dependency

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.

Prevent move out div

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

thank you

disableParentChange

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>

browser hang up once using jquery 2.x.x

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

Create/destroy new version(attempted to call method 'create')

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 );

Relink Bower to this repo

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

Issues with drag locations

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.

unnormal movement in RTl

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

Don't show the "+" icon when there is nothing to expand

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...?

Classes in documentation

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

relocate doesn't fire is level doesn't change

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.

events not working

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

Is there a way to add to a category by dropping on the category itself rather than inside it?

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.

Bootstrap dropdown in dragable item

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 "

allow/disallow movement by mouse to left (make sibling) and right (make child)

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.

Loading data through Ajax

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?

Problems with assigning of classes when isTree is true

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.

Dragging shows (maxLevels+1) hover

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.