Unbind Nestable js Events
<p>I have a problem with the events binded from Nestable js.
I am showing a modal with a list that use Nestable, the problem is that when I close the modal and show it again I get the events rebinded. Then when I try to move elements from one list to the next one I am getting multiple "dd-empty".
Here is my code:</p>

<pre><code>$(function () {
    $('.dd').nestable({ maxDepth: 1 });
});
</code></pre>

<p>This is causing that all the events on Nestable are binded. Then I close the modal and fire it again.
I was thinking to attach the code to an object that is destroyed when the modal is open or close again.
The problem is that the events are binded inside of Nestable, and I cannot unbind them manually.
I know the some libraries like draggable jquery UI, has a destroy method to handle this kind of situations, but Nestable don't.
<a href="https://i.stack.imgur.com/KgGrV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KgGrV.jpg" alt="This is an example of the two empty fields that I get, some times are 5 or 8"></a></p>

<hr>

<h2>Edit</h2>

<p>Nevermind, I just found the way to avoid this, just add a unbind method to the library, and every time that the Init() method is called (well, actually just once), it call the unbind method and that fix my issue.
Here is the code:
Inside of jquery.nestable.js, find the method Plugin, and add the call to the method unbind_events();</p>

<pre><code>function Plugin(element, options)
    {
        this.w  = $(document);
        this.el = $(element);
        this.options = $.extend({}, defaults, options);
        this.unbind_events();
        this.init();
    }
</code></pre>

<p>Then, after the property init in the prototype add the code for the unbind method.</p>

<pre><code>unbind_events: function () {
            console.log("Unbind events");
            var list = this;
            list.el.data('nestable-group', this.options.group);
            list.placeEl = $('&lt;div class="' + list.options.placeClass + '"/&gt;');
            list.el.unbind("click");
            list.el.unbind("mousedown");
            list.el.unbind("mousemove");
            list.el.unbind("mouseup");
            if (hasTouch) {
                list.el[0].unbind('touchstart');
                window.unbind('touchmove');
                window.unbind('touchend');
                window.unbind('touchcancel');
            }
        },
</code></pre>

<p>This fix my issue.
Regards.</p>