Nestable

Nestable copied to clipboard

It is rather useful when we want to send AJAX request to web server and save changes made by user

Sorry - how does this work then? Is this correct if I want to see the source ID in console?

$('#nestable1').nestable({ dropCallback : 'sourceId' }).on('change', function(e) { console.log(e); });

Here is example:

$('#article-container').nestable({
  dropCallback: function(details) {
    console.log(details.sourceId);
  }
});

Thanks - getting better results now!

Hi! great job! how can i access an item class using sourceEl? thanks a lot

Seems a very usable PR. Is the repo owner no longer active?

+1

I was having the same need, but you can make a small change that will yield in even better results.

// Change lines 296..299 into the following:
// this.el.trigger('change');
// if (this.hasNewRoot) {
//     this.dragRootEl.trigger('change');
// }
// ...into this:
el.trigger('change');

Now you can do something like this:

// The following will only trigger the changed element
$('.dd').nestable({
  // options
}).on('change', '.dd-item', function(e) {
  e.stopPropagation();

  var id = $(this).data('id'),
      parentId = $(this).parents('.dd-item').data('id');

    $.ajax({
      // options
    })
});

OR:

$('.dd').nestable().on('change', function() {
  // want to know the clicked element?
  // => check out: `e.target` and/or `e.currentTarget`
  // the call will bubble up to the root element (and all elements in between) if you don't stop propagation
});

What do you think?

Change the default settings to. I've added onDragFinished callback.

    var defaults = {
            listNodeName    : 'ol',
            itemNodeName    : 'li',
            rootClass       : 'dd',
            listClass       : 'dd-list',
            itemClass       : 'dd-item',
            dragClass       : 'dd-dragel',
            handleClass     : 'dd-handle',
            collapsedClass  : 'dd-collapsed',
            placeClass      : 'dd-placeholder',
            noDragClass     : 'dd-nodrag',
            emptyClass      : 'dd-empty',
            expandBtnHTML   : '<button data-action="expand" type="button">Expand</button>',
            collapseBtnHTML : '<button data-action="collapse" type="button">Collapse</button>',
            group           : 0,
            maxDepth        : 5,
            threshold       : 20,
            onDragFinished  : function(currentNode, parentNode) { }
    };

Change the dragStop function to:

        dragStop: function(e) {
            var list = this;
            var el = this.dragEl.children(this.options.itemNodeName).first();
            el[0].parentNode.removeChild(el[0]);
            this.placeEl.replaceWith(el);

            this.dragEl.remove();

            var $parents = $(el[0]).parents('.' + list.options.itemClass);
            var $parent = null;
            if ($parents.length > 0) $parent = $parents[0];
            list.options.onDragFinished(el[0], $parent);
            this.el.trigger('change');
            if (this.hasNewRoot) {
                this.dragRootEl.trigger('change');
            }
            this.reset();
        },

Now you can have the callback with the child/parent

hi, nice work. dropCallback event like change event fires after user just clicks drag handler without no change how to check if user changed something like order or parent or just clicked drag handler?

guys, how do I remove an item?

Thank you man, and for @rudionrails too.

I'm facing problem in nestable tree. I've two lists e.g. List A and List B. List A has multiple items and List B is empty. My requirement is when user drag the items on List B e.g. empty list then it should save into database and when user drop the item from List B then it should be remove from the database so I can track how much items has been dropped on the list.

If any one can provide me the source code it will be great help for me.

Thanks in advance.

+1

salééém

how to use this with data table min.js its not working in table tag??? if i replace ol and li its showing error: Cannot read property 'parentNode' of undefined and dd-handle showing up

please tell me only parent and child not parent child arent child arent child

One problem i see here with nestable is that when you reload data into de nestable it does not render the items for the second, third time you make an ajax call with data to load on it.

Any clues?