Question

So I have an issue where I would like to be able to toggle the sortable plugin’s behavior when the user presses a button. IE, have a sort mode and a view mode. I have tried to do something like this:

function enterEdit(){
    $('#someDiv').sortable();
} 

function enterView() {
    $('#someDiv').sortable('destroy');
}

$('#editToggle').on('click', '.toggle-button', function(e){
        var $target = $(e.target);
        if(!$target.hasClass('active')) {
            if($target[0].id == 'edit'){
                enterEdit();                    
            } else {
                enterView();
            }
            $('#editToggle').children().removeClass('active');
            $target.addClass('active');
        }
    });

This is what is going on. It works when I first initialize it, and then the destory also works. The problem is, when I then click edit again, the sortable does not reinitialize. Has anyone ever tried this before, or have a better solution? Thanks!

Answer 1

if you give each element which should be sortable a specific class and then initialize with $('#someDiv').sortable({items: li.yourClass});

Then you can just add and remove this class on click and the elements will be excluded or included again.