ramonsmit / nestable2 Goto Github PK

Considering example from demo page: https://ramonsmit.github.io/Nestable2/

Example for 'Draggable Handles'(the last one).

Expected behavior

Drag should work for any position in the list.

Actual behavior

e.g.
I'm not able to drag item14 after item 15 if item 15 expanded.

Steps to reproduce the behavior

1. Go to https://ramonsmit.github.io/Nestable2/.
2. Drag item 14.
3. Try to drop it right after Item 15 to the end of the list.

Tried in latest FF and Chrome.
But it works fine if don't use additional draggable handle.

Exist a callout function to the remove fallout function

Expected behavior

When adding an item using:
$('.dd').nestable('add', {"id":1,"children":[{"id":4}]});
..it would be nice if the layout would consider a custom build function. Like when using:
buildItem(item) { ... }

Actual behavior

When adding an item, the default layout is used for a new item.

Steps to reproduce the behavior

Use a custom layout with:
buildItem(item) { ... }
Then use:
$('.dd').nestable('add', {"id":1,"children":[{"id":4}]});

It would be nice to have the css from the index.html as a seperate file, to allow it to be used by bower

hasTouch is returning a false positive in the below version of Firefox which means that the drag/drop ability of the plugin stops working.

jQuery: 1.12.4
Firefox: 50.1.0

If i create a cookie with an array of id's to store the collapsed items, how can I collapse all items from the array when I'm the tree gets rendered?

Drag a item above dd-nochildren item just not show the placeholder, but if it have children by default and you drop it, it will become a children anyway.

Unfortunately, Drag & Drop function doesn't work in Chrome, but touchscreen works good. ]

I've tried to set "dd-nodrag" to several items, but it just doens't work.

example:

<ol class="dd-list">
    <li data-id="1" class="dd-item"><div class="dd-handle dd-nodrag">test 1</div></li>
    <li data-id="2" class="dd-item"><div class="dd-handle dd-nodrag">test 2</div></li>
    <li data-id="3" class="dd-item"><div class="dd-handle">test 3</div></li>
    <ol class="dd-list">
        <li data-id="4" class="dd-item"><div class="dd-handle dd-nodrag>test 4</div></li>
        <li data-id="5" class="dd-item"><div class="dd-handle">test 5</div></li>
    </ol>
    <li data-id="6" class="dd-item"><div class="dd-handle">test 6</div></li>    
</ol>

I looked into the javascript code, and in the onStartEven method, i think I found a bug.
In the first "if-statement" there is this.

if(!handle.hasClass(list.options.handleClass)) {

When I remove the "!" .. it works again.

if(handle.hasClass(list.options.handleClass)) {

Collapse not working properly for dd3-item

Hi! There is a bug in Add function. When we try to add new item with setting parent_id, where parent item is non-leaf element, a new item appends to the parent item and to each its descendant.
For example, there is a code from your Demo-page:
https://jsfiddle.net/RomanKhomyshynets/4vogfw6o/1/
When we bind for "Add new item" button such actions
if(action === 'add-item') { var newItem = { "id": ++lastId, "content": "New Item " + lastId, "parent_id":2 }; $('#nestable').nestable('add', newItem); }
Nestable inserts "New item 13" two times - as a child of Item 2 and child of Item 5.

Hi, me again.
I am working in a funcionality, based in you plugin. So, my quietion is
It is possible to find an element based on its id, ie when clicking a link go to the element, even if it is inside another element collapsed.

When I try to drag an element dont scroll the page
How can I fix that?

I havent found a way to get the dragged item in the change event, am I missing something or it is impossible?

Jquery is being called like:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

and should be called like:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

so that drag and drop works for people viewing the demo over HTTPS:

https://dbushell.github.io/Nestable/

If the demo gets served from the master branch, that line is:

https://github.com/RamonSmit/Nestable/blob/master/index.html#L449

Hi, when you go to the demo page the "download on github" link still refers to the old Github page being: https://github.com/dbushell/Nestable

You reference your demo page in the Readme but does not have a demo of the current abilities of Nestable.

Hi, I'm interesting by adding npm support via package.json. Is it possible ?

Its hard do determine how beneficial this branch is, it has not been updated since october, nor is it an actual fork of nestable, which is odd. It is hard to determine its worth and it doesn't show up in nestables network.

It might be good to establish a roadmap , especially since the readme still even links to nestables demos

I am trying to determine which pull requests against dbushell have been merged in here, and what issues need to be preserved as outstanding.

has everyone moved to a new library?

I'm trying to attach data to items using data attributes. What I need is a way for the click event to bubble up so I can access the $(event.target).data( 'myattr' );

Right now the event target is always the outermost container.

Is there a way to do this?

It would be useful to provide CDN support for this plugin

Hello, when i m start dragging some li tag some another li are hidden... When i m start drag last li tag all li elements are hidden except my dragged.. It was happens to anyone? I do some mistake?
Btw HTML structure is copied and here is javascript code:
$('.dd').nestable();

Thanks.

I've tested add method and found out one issue when adding item with parent_id.
When adding first child to parent with id parent_id, add method doesn't add expand/colapse buttons and further we have no chance to add them from user side. Looks like we should use setParent method which already exist. But I'm not quite sure where to add it.

I try to move an item in a div with scroll, but dont up and dont down scroll when the item is in top or bottom div.

Why the plugin doest'n work for IE 10 ... ? It's very bad

$('.dblclick').dblclick(function () {
    console.log($(this));
  });

This code does not work...

Expected behavior

HI!
Want Drag Item to another List and Item should remain in Previous List and also added to another list. (Clone option)

Actual behavior

There is an option (clone) for this purpose in Nestable-1 . but when we use it it duplicates the list even we click or drag back to same list.

Steps to reproduce the behavior

Fork this template to reproduce issue.

Hey, Ramon, so I was looking at Nestable and the various forks out there. Seems like yours is the most recent/active. It's also the only one that changed the README.md as something that you wanted to maintain (and has no outstanding pull requests).

Just wondering if this is something you're going to actively work on? If so, it might be worth:

• Going through the various pull requests from the old project, https://github.com/dbushell/Nestable/pulls and integrating (probably just easiest to do a manual merge/recheckin, reference the old pull request, and add a credit to the contributors list), and then posting an update on the pull request w/ a link to the project
• Drop a link to @tchapi about https://github.com/tchapi/Nestable - looks like he did some merging of some requests before a few months ago but hasn't really maintained anything.
• Register this as a new bower project. Maybe this should just be renamed? http://bower.io/search/?q=nestable Not very creative, but maybe just calling it nestable2? https://github.com/lhl/Nestable/blob/master/bower.json , submitting a pull request for that now. You can modify and I'll rebase after that...

Regardless, I plan on using this as a codebase for some projects so if you're responsive to pull requests that'd be great, just checking in!

You should put the index.html in the bower ignore tag, its not really needed, or at least use an empty ignore tag so bower stops complaining.

For versioning you could take a look at http://bower.io/docs/api/#version , it seems to create git tags automatically, and keeps the bower.json in sync.

Expected behavior

Actual behavior

Steps to reproduce the behavior

Fork this template to reproduce issue.

Need option that 'Distance the mouse has to travel to start dragging'.

Hi,

Since this project is under active development again, could you please distribute a new release?

The last version (1.2.3) dates back to 27 February and some new features (such as asNestedSet method) are not available. It would be useful to get a more recent release available via Bower.

Hi there,

my maximum menu depth is 3.
Is it possible that a main menu item (depth/level 1) has a menu item with depth/level 3 (without using a level 2 item)?
Right now I am only to make it work with a menu item with depth/level 2 inbetween.

I hope someone can help me with this!
Thank you (and sorry for my english)!

Hi there,

I was thinking of a new feature, which will make the nestable as levels, what I mean by that (not easy to explain)

lets say that we have 4 levels of lists as follows for example:

Sales Director
Sales Managers
Sales Supervisors
Salesmen
each one of these levels especially 3rd and 4th level, needs to be locked. What I mean is that salesman can be moved from a sales supervisor to another sales supervisor but can't be a sales supervisor or sales manager or sales director so he/she must be locked as a salesman in terms of level, but can jump from a branch to another branch.

Same thing with sales supervisor can be moved with his/her salesmen from a sales manager to another sales manager but can't be promoted to a sales manager and can't become a salesman. AND So On...

Thank you,

P.S.: I am welling to sponsor that feature to make the developer get some support.

I encountered problem with Chrome touch events when I am trying to drag item on notebook with touch screen. It is possible to drag item by touching the screen but it is impossible to drag item with mouse.

I copied the example which you provided in the code tab.
I exactly copy and past the following

1. html
2. javascript code
3. your library (js and css file)

simply 'nestable' is not working on chrome version 55.0.2883.87 m (currently latest version)
-note: the chrome console does NOT give me any errors, it is clean

but it's working on Firefox correctly (version 50.1.0)

Any help. Thanks in Advanced

I know there are some other scripts out there that offer the possibility to sort blocks horizontally, RubaXa/Sortable is a popular one.

The big drawback is that this script doesn't have the "nested" ability. So is it possible to create an option so that your script also would work horizontally? Without the nesting then of course.

Thanks!

Tried the demo both included in the package as well as another one at http://daltcore.net/nestable/nestable_demo.html. Neither let me do anything as far as dragging or dropping. It will let me collapse and expand, but not drag and drop.

It does not seem to want to let the mouse pick up the item to drag like it will in Chrome and IE.
I am on Windows 8.1 running Firefox 31.
Now I tested it on Windows 7 with the same version of Firefox and it works. So much fun!

Again it works with Chrome and IE on Windows 8, just nor Firefox.

hello,
when you drag an element with a scroll on a parent container with elements, scrolling effects only on down side, but when you drag on top,it doesn't makes an effect.
that is.
thanks.

Expected behavior

I tried to add a link for each element to edit or delete a specific element.

Actual behavior

On clicking on the a-tags the e.preventDefault() seems to trigger, so that i can't get the on.click event :(

Steps to reproduce the behavior

<div class="dd" id="modal_1500296184866-nestable-list">
  <ol class="dd-list" id="modal_1500296184866-structList-first">
    <li class="dd-item" data-id="1" data-title="test">
      <div class="dd-handle blue white-text">
        test
        <div class="right">
          <a class="pointer white-text margin-r10 modal_1500296184866-struct-edit" data-id="1" title="Bearbeiten">
            <i class="fa fa-pencil" aria-hidden="true"></i>
          </a>
          <a class="pointer white-text modal_1500296184866-struct-delete" data-id="1" title="Löschen">
            <i class="fa fa-trash" aria-hidden="true"></i>
          </a>
        </div>
        <div class="clear-fix"></div>
      </div>
    </li>
  </ol>
</div>

Is there an option to ensure that once you start dragging any list item, nestable does not allow the item to be moved across the hierarchy but only among items on its own level?

Am i the only one experiencing this. This just happened, idk.
It ruined my whole system. The nestable became draggable, i can now drag the panels in which of the objects in it dont functio anymore. What happened? I tried it on different units, still the same results i got. Is this because of the browser or what? I need help pls? T_T

I can't drag items between list if one of the two lists is empty from the start.
how can I go about solving this ?

Im trying enabled Drag functionality, but i cant, its possible it or not. Tank you

Is there a way to restrict an item to a certain depth in the tree?

For instance, let's say I'm displaying "folders" and "files". I want to restrict files to only be re-ordered in their folders or be dropped into other folders. Folder should only be sortable within their own level.

Also, how do you prevent something from being dropped at the root level? Putting dd-nochildren on the root list seems to prevent targeting any level of the list.

I've tried achieving this with the onDragStart even and adding dd-nochildren, but I can't seem to get it right.

How about reducing nestable.css to what's needed to actually function? I mean really .dd { max-width: 600px; }?

Even the requirement to add the dd, dd-list, and dd-item (I can see dd-handle, but even that could have a default) is unnecessary: you can figure out who gets what class assigned upon the initial nestable call.

My initial code didn't use the included CSS (from the nestable 1 days). I used jquery to assign the classes and just styled what I needed. Worked great. Until I dragged the cursor out of the nestable div. THen, all by LIs disappeared. Still don't know why. Ended up removing all my custom CSS and included nestable.css and it worked. Nothing in my structure changed.

Hi!

Version: 1.6

I'm trying to delete the selected item, but it does not delete.
My code is from the example:

visible.nestable('remove', id, function(){
        console.log(id);
      });

In this case, the ID of the element to be deleted is displayed in the console.

Using the following code:

            nestableElement.nestable('replace', {
                id: replaceId,
                name: name,
                label: name,
                slug: slug,
                css_class: cssClass,
                children: children
            });

where children is similar to the following object:

[{
        "css_class" : "",
        "slug" : "/distributors/find",
        "id" : 1472820817026,
        "label" : "Find A Distributor",
        "name" : "Find A Distributor"
    }, {
        "css_class" : "",
        "slug" : "/distributors/become",
        "id" : 1472820818729,
        "label" : "Become A Distributor",
        "name" : "Become A Distributor"
    }, {
        "css_class" : "",
        "slug" : "/distributors/suggest",
        "id" : 1472820819257,
        "label" : "Suggest A Distributor",
        "name" : "Suggest A Distributor"
    }
]

It results in a new li being created inside the existing li, and the expand/collapse doesn't display. The following is copied from Chrome:

<li data-name="Distributors" data-label="Distributors" data-id="1472139716346" data-url="/distributors" data-css_class="" data-is_open="true" class="dd-item">
<li data-id="1472139716346" data-name="Distributors" data-label="Distributors" data-url="/distributors" data-css_class="" class="dd-item">
   <div class="dd-handle"><span class="dd-content">Distributors</span></div>
   <div class="dd-options"><button class="btn btn-sm btn-success add" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add"> <i class="fa fa-plus-square"></i></button><button class="btn btn-sm btn-info edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-edit"></i></button><button class="btn btn-sm btn-danger delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"> <i class="fa fa-trash"></i></button></div>
   <ol class="dd-list">
      <li data-css_class="" data-url="/distributors/find" data-id="1472820817026" data-label="Find A Distributor" data-name="Find A Distributor" class="dd-item">
         <div class="dd-handle"><span class="dd-content">Find A Distributor</span></div>
         <div class="dd-options"><button class="btn btn-sm btn-success add" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add"> <i class="fa fa-plus-square"></i></button><button class="btn btn-sm btn-info edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-edit"></i></button><button class="btn btn-sm btn-danger delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"> <i class="fa fa-trash"></i></button></div>
      </li>
      <li data-css_class="" data-url="/distributors/become" data-id="1472820818729" data-label="Become A Distributor" data-name="Become A Distributor" class="dd-item">
         <div class="dd-handle"><span class="dd-content">Become A Distributor</span></div>
         <div class="dd-options"><button class="btn btn-sm btn-success add" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add"> <i class="fa fa-plus-square"></i></button><button class="btn btn-sm btn-info edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-edit"></i></button><button class="btn btn-sm btn-danger delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"> <i class="fa fa-trash"></i></button></div>
      </li>
      <li data-css_class="" data-url="/distributors/suggest" data-id="1472820819257" data-label="Suggest A Distributor" data-name="Suggest A Distributor" class="dd-item">
         <div class="dd-handle"><span class="dd-content">Suggest A Distributor</span></div>
         <div class="dd-options"><button class="btn btn-sm btn-success add" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add"> <i class="fa fa-plus-square"></i></button><button class="btn btn-sm btn-info edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-edit"></i></button><button class="btn btn-sm btn-danger delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"> <i class="fa fa-trash"></i></button></div>
      </li>
   </ol>
</li>
</li>

I'm using a custom itemRenderer:

function (item_attrs, content, children, options, item) {
                        var item_attrs_string = $.map(item_attrs, function (value, key) {
                            return ' ' + key + '="' + value + '"';
                        }).join(' ');

                        if (!item.label) {
                            setTimeout(function () {
                                $('[data-id=' + item.id + ']').find('.dd-handle').effect('highlight', {color: '#dff0d8'}, 2000);
                            }, 100);
                        }

                        var html = '<' + options.itemNodeName + item_attrs_string + '>';
                        html += '<' + options.handleNodeName + ' class="' + options.handleClass + '">';
                        html += '<' + options.contentNodeName + ' class="' + options.contentClass + '">';
                        html += content;
                        html += '</' + options.contentNodeName + '>';
                        html += '</' + options.handleNodeName + '><div class="dd-options">' +
                            "<button class='btn btn-sm btn-success add' data-toggle='tooltip' data-placement='top' title='' " +
                            "data-original-title='Add'> " +
                            "<i class='fa fa-plus-square'></i>" +
                            "</button>" +
                            "<button class='btn btn-sm btn-info edit' data-toggle='tooltip' data-placement='top' title='' " +
                            "data-original-title='Edit'> " +
                            "<i class='fa fa-edit'></i>" +
                            "</button>" +
                            "<button class='btn btn-sm btn-danger delete' data-toggle='tooltip' data-placement='top' title='' " +
                            "data-original-title='Delete'> " +
                            "<i class='fa fa-trash'></i>" +
                            "</button>" +
                            "</div>";
                        html += children;
                        html += '</' + options.itemNodeName + '>';

                        return html;
                    }

I can't see that I'm doing anything wrong here. I've inspected the nestable source and I'd suggest the replace function should use replaceWith() instead html():

replace: function (item)
        {
            var html = this._buildItem(item, this.options);
            this._getItemById(item.id).replaceWith(html);
        }

This appears to fix the HTML structure issue but the expand/collapse still doesn't display. Are you able and available to help?

Many thanks