JS error on loading - "Cannot read property 'left' of null" about nestedsortable

[harsimranb]

I was able to fix this by removing the toleranceElemenet property.

[benlwilliams]

@harsimranb - and everything still worked for you? In the documentation he states that it must be present. I'll give it a shot (unfortunately can't get to it until tomorrow)

[harsimranb]

Yeh, it worked for me. I didn't go through the documentation, but it seems to be working fine. Give it a try.

[benlwilliams]

I gave it a try. It prevented the JavaScript error, but made the dragging/dropping positioning all out of whack. Whatever item I try to click and drag, ends up positioning itself at the top of the screen even though my mouse cursor is somewhere else.

[harsimranb]

Interesting....I didn't have that issue. The only is I had was that when I set the maxLevels to 2, it shows the place holder for level 3, but doesn't actually put it there, just puts it back to previous level. Which is a bug IMO. I haven't gotten a chance to revisit the project, but once I do, I will definitely do more research and post my findings here.

[mjsarfatti]

Hello,
a couple of clarifications on this matter:
a) the toleranceElement property is very nevessary :) otherwise it becomes virtually impossible to sort nested lists
b) the placeholder is still shown, but it is given the class mjs-nestedSortable-error. you can either style the class, for example, with a red background (like in my demo) to show something's wrong there, or give it 0 height to make it disappear

As for your error, please try with toleranceElement: '> .inner-wrap'. Otherwise it will not find the right .inner-wrap, which is only the direct child of the li element, and not the child of the child as well.

[benlwilliams]

@mjsarfatti - thanks for the suggestion. I tried toleranceElement: '> .inner-wrap' But it does the same thing. With every pixel I click-and-drag, I get Uncaught TypeError: Cannot read property 'left' of null

[mjsarfatti]

what html are you using?

[benlwilliams]

Here's the starting pattern of the HTML (it's really long so I'm just cutting it off).

<ul class="project-wizard">
        <li class="level-1">
            <div class="inner-wrap">
                <input type="text" class="input-text tiny percent" />
                Supply
            </div>

            <ul>
                <li class="level-2">
                    <div class="inner-wrap">
                        <input type="text" class="input-text tiny percent" />
                        Macro Labor Supply Indicators
                    </div>

                    <ul>
                        <li class="level-4">
                            <div class="inner-wrap">
                                <input type="text" class="input-text tiny percent" />
                                Total Labor Force
                                <a href="#" class="icon delete">delete</a>
                            </div>
                        </li>
                        <li class="level-4">
                            <div class="inner-wrap">
                                <input type="text" class="input-text tiny percent" />
                                Unemployment Rate
                                <a href="#" class="icon delete">delete</a>
                            </div>
                        </li>
                        <li class="level-4">
                            <div class="inner-wrap">
                                <input type="text" class="input-text tiny percent" />
                                Projected Population Growth
                                <a href="#" class="icon delete">delete</a>
                            </div>
                        </li>
                    </ul>
. . .

And here's the JavaScript:

$(document).ready(function () {

    $('.project-wizard').nestedSortable({
        handle: '.inner-wrap',
        items: 'li',
        toleranceElement: '> .inner-wrap',
        listType:'ul'
    });

});

[mjsarfatti]

Sorry, no idea what's happening. Everything looks ok to me... try a simplified version in jsbin maybe?

[benlwilliams]

Good Idea. I'll give it a try soon and give an update.

[benlwilliams]

All my CSS HTML and JS worked just fine in JS Bin. Must be another random script in my applicaiton interfering.

[stevenpetryk]

@benlwilliams Did you ever figure out what the problem was? I'm currently experiencing the same issue with nearly identical HTML and completely identical JS.

[benlwilliams]

@stevenpetryk Sorry, I don't remember. I got it working on my POC, but we eventually removed this plugin because it performed to slow with the massive amount of data we were using with it.

[troygaylord]

Hi Ben, I'm also using nestedSortable for a large number of elements. Did
you move to another plugin or write something custom? Curious of the
performance gains you were able to get if you continued with nested
sortable elements.

Cheers,
Troy

On Thu, Sep 26, 2013 at 9:59 PM, Ben Williams [email protected]:

@stevenpetryk https://github.com/stevenpetryk Sorry, I don't remember.
I got it working on my POC, but we eventually removed this plugin because
it performed to slow with the massive amount of data we were using with it.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/46#issuecomment-25217746
.

[benlwilliams]

We ended up doing a less impressive custom solution.

On Thu, Sep 26, 2013 at 9:08 PM, Troy Gaylord [email protected]:

Hi Ben, I'm also using nestedSortable for a large number of elements. Did
you move to another plugin or write something custom? Curious of the
performance gains you were able to get if you continued with nested
sortable elements.

Cheers,
Troy

On Thu, Sep 26, 2013 at 9:59 PM, Ben Williams [email protected]:

@stevenpetryk https://github.com/stevenpetryk Sorry, I don't
remember.
I got it working on my POC, but we eventually removed this plugin
because
it performed to slow with the massive amount of data we were using with
it.

—
Reply to this email directly or view it on GitHub<
https://github.com/mjsarfatti/nestedSortable/issues/46#issuecomment-25217746>

.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/46#issuecomment-25217994
.

[troygaylord]

Ok, thanks for getting back to me.

On Fri, Sep 27, 2013 at 8:04 AM, Ben Williams [email protected]:

We ended up doing a less impressive custom solution.

On Thu, Sep 26, 2013 at 9:08 PM, Troy Gaylord [email protected]:

Hi Ben, I'm also using nestedSortable for a large number of elements.
Did
you move to another plugin or write something custom? Curious of the
performance gains you were able to get if you continued with nested
sortable elements.

Cheers,
Troy

On Thu, Sep 26, 2013 at 9:59 PM, Ben Williams [email protected]:

@stevenpetryk https://github.com/stevenpetryk Sorry, I don't
remember.
I got it working on my POC, but we eventually removed this plugin
because
it performed to slow with the massive amount of data we were using
with
it.

—
Reply to this email directly or view it on GitHub<

https://github.com/mjsarfatti/nestedSortable/issues/46#issuecomment-25217746>

.

—
Reply to this email directly or view it on GitHub<
https://github.com/mjsarfatti/nestedSortable/issues/46#issuecomment-25217994>

.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/46#issuecomment-25240372
.

[willyboy]

@troygaylord I was having this same issue. Turns out one of my LI's wasn't wrapped in a div (I have a plus icon to add a new list item). Check to make sure every single element has the toleranceElement inside of it.

[chrisdpeters]

I started experiencing this error after I started using ZURB Foundation.

Without thinking about it, I started using Foundation's button groups inside of my nested sortable list items, which require that you mark everything up with an unordered list:

<ul class="button-group">
  <li>[Edit link]</li>
  <li>[Delete link]</li>
</ul>

Because I had my nested sortable configured to look for unordered lists, these "extra" unordered lists caused this Cannot read property 'left' of null error.

# This is CoffeeScript. Do not be afraid of CoffeeScript. ;)
$('#collections-list > ul').nestedSortable
  handle: '.nested-list-item-container'
  listType: 'ul'
  items: 'li'
  opacity: 0.6
  tolerance: 'pointer'
  toleranceElement: '> .nested-list-item-container'

(Maybe this comment will help a frustrated Googler in the future. ;))

[kumarkrati]

Even I got the same error. I fixed it by correcting my HTML. There was one extra empty LI in my HTML, and the tolerance was toleranceElement: '> div', which was throwing the error cannot read property 'left' of null error. Hope it helps.