Moving (drag) three Ivs at the same time and disabling with a checkbox

Question

I’m using this code to move Ivs simultaneously: https://github.com/someshwara/MultiDraggable

The logic: If checkbox is checked, use drag in group, otherwise use drag per unit'.

But once unchecked the checkbox (to use drag per unit) the same is not working as it should in the following example: https://jsfiddle.net/L56yvyms/1/

            $('document').ready(function() {


              $("#checkboxDragAll").click(function() {

                if ($(this).is(':checked')) 
                {

                    //Se 'checkbox marcado' drag funciona em "grupo"
                        $(".d").multiDraggable({
                          group: $(".d")
                        });

                    //Setando o drag em .d2 em "unidade"
                        // $(".d").multiDraggable({
                        //  group: ""
                        //});


                } else {
                          //Se 'checkbox desmarcado' drag deveria funcionar em "unidade"!!!
                          // Mas se anteriormente setado em "grupo", 
                          // o drag em "unidade" não está funcionando.

                          $(".d").draggable( "destroy" );
                          $(".d").draggable();


                };

              });
            });

Somebody save me? : B

Answer 1

After a good research I found a kind of improvement of this function multiDraaggable(). You can see it here: https://github.com/wizztjh/MultiDraggable/blob/master/multidraggable.js

He basically adds that to the code:

if (opts == "destroy") {
  return this.each(function() {
    $(this)
      .draggable("destroy")
      .unbind(".multiDraggable")
      .data("init", "");
  });
}

In addition to making some small but interesting modifications, I think. So I advise you to follow this update.

With these amendments, we now have the argument "destroy", also to the .draggable('destroy') "native". So just do this in your code:

$('document').ready(function() {
  $("#checkboxDragAll").click(function() {
    if ($(this).is(':checked')) {
      $(".d").multiDraggable({
        group: $('.d')
      });
    } else {
      $(".d").multiDraggable('destroy');
      $(".d").draggable()
    };
  });
});

You can see running here below:

Demonstration - Jsfiddle