CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Matthew Blewitt
Matthew Blewitt

Reputation: 487

How to disable drag and drop with jquery.shapeshift?

I'm using this plugin grid system with drag and drop functionality: https://github.com/McPants/jquery.shapeshift.

You can call the shapeshift function and pass it the parameters to enable and disable the drag and drop functionality.

$(".container").shapeshift({
  enableDrag: true,    
});

I want to be able to turn on and off this feature. I used this code:

var dragState = 0;

$(".switch").on("click", function() {

    if(dragState == 0) {
        options = {
          enableDrag: true,
        }
        dragState = 1;
    } else {
        options = {
          enableDrag: false,            
        }
        dragState = 0;
    }

    $(".container").shapeshift(options);
});

When I run this code I can turn on drag and drop but not back off again.

Does anyone have any suggestions or experience with this plugin?

Upvotes: 0

Views: 2048

Answers (2)

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

Sorry for answering on such an old question but i was just going through shapeshift.js and understand that for disabling drag and drop we can destroy it but not in such a long way and there is no need to take it to variable.

Hope you will interested in this short way and update your codes.

Below is the code

$('div').trigger("ss-destroy");

Above code is sufficient for destroying and also a very clean and convenient way according to me.

Try once!

Upvotes: 0

Chad Carisch
Chad Carisch

Reputation: 2472

Use http://mcpants.github.io/jquery.shapeshift/ as a reference.

Basicaly all you need to do is:

$(function(){
    var sso = {
        minColumns: 3,
        enableDrag: false
    };

    var ss = $(".container").shapeshift(sso);
    $('button').click(function () {
        sso.enableDrag = true;
        ss.trigger('ss-destroy');
        ss.shapeshift(sso);

    });
});

I simplified the example to show what needs to be done in this fiddle:

http://jsfiddle.net/carisch19/hDm4e/2/

Added enable and disable buttons:

http://jsfiddle.net/carisch19/hDm4e/4/

Upvotes: 3

Related Questions