Moving (drag) three divs at the same time and deactivating with a checkbox

Navigation
1

I am using this code to move divs simultaneously: link

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

But once the checkbox is unchecked (to use 'drag per unit') the same is not working as it should as in the following example: link 

            $('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

    
asked by anonymous 14.01.2016 / 01:16

1 answer

1

After a good search I found a kind of enhancement of this multiDraaggable() function. You can see it here: link

It basically adds this to the code: 

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

In addition to making some minor changes, but very interesting, as I see it. So I advise you to follow this update.

With these changes, we now have the argument "destroy" , also 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 working here below:

Demo - JsFiddle

    
14.01.2016 / 02:01
ImgSelect: MediaStream stop is not a function How to build a relative URL securely?