I'm trying to destroy an instance of jQuery UI's draggable, but I'm receiving a 'cannot call method' error.

My code

$('table.paper tr').draggable({
    helper: 'clone',
    create: function(event, ui) {
        $('body').on('click', '[data-action="edit-ingredients"]', function(event) {
            event.preventDefault();
            $('table.paper').draggable('destroy');
        });
    },
    start: function(event, ui) {
        c.tr = this;
        c.helper = ui.helper
        $(this).hide();
    },
    drag: function(event, ui) {
        var collides = $('table.paper').overlaps($(c.helper));
        if (collides.hits.length) {
            $(c.helper).removeClass('delete');
        } else {
            $(c.helper).addClass('delete');
        }
    }
});

The error
Error: cannot call methods on draggable prior to initialization; attempted to call method 'destroy' .11.0.min.js Line 2

In 'logic speak', this error is telling me my flow of code isn't correct as jQuery UI's draggable isn't initiated when I attempt to destroy it - however, as you can see I am creating the event listener within the draggable's 'create' event.

I'm trying to destroy an instance of jQuery UI's draggable, but I'm receiving a 'cannot call method' error.

My code

$('table.paper tr').draggable({
    helper: 'clone',
    create: function(event, ui) {
        $('body').on('click', '[data-action="edit-ingredients"]', function(event) {
            event.preventDefault();
            $('table.paper').draggable('destroy');
        });
    },
    start: function(event, ui) {
        c.tr = this;
        c.helper = ui.helper
        $(this).hide();
    },
    drag: function(event, ui) {
        var collides = $('table.paper').overlaps($(c.helper));
        if (collides.hits.length) {
            $(c.helper).removeClass('delete');
        } else {
            $(c.helper).addClass('delete');
        }
    }
});

The error
Error: cannot call methods on draggable prior to initialization; attempted to call method 'destroy' http://code.jquery./jquery-1.11.0.min.js Line 2

In 'logic speak', this error is telling me my flow of code isn't correct as jQuery UI's draggable isn't initiated when I attempt to destroy it - however, as you can see I am creating the event listener within the draggable's 'create' event.

• javascript
• jquery
• jquery-ui

• you are instantiating a draggable with selector $('table.paper tr') then destroying a draggable with a different selector $('table.paper') which i assume is not a draggable element – pumpkinzzz Commented Mar 9, 2015 at 9:46
• @pumpkinzzz God dammit, it's Monday! Thanks for pointing that out. Such a waste of content on SO now. If you post it as an answer I'll accept it. – Richard Hedges Commented Mar 9, 2015 at 9:48
• ahaha np mate. answered :) – pumpkinzzz Commented Mar 9, 2015 at 9:50

2 Answers 2

you are instantiating a draggable with selector $('table.paper tr') then destroying a draggable with a different selector $('table.paper') which i assume is not a draggable element.

Sometimes, one of the best solutions to know if an element is draggable or not is to check if there is a class named .ui-draggable.