How to make a Rigger draggable?

Asked

Viewed 26 times

1

I’m having trouble positioning an element in the center when I click on a zoom method, an element UI Jquery Draggable is dragged off to the corner, and I click on a zoom tool, it ends up disappearing from the screen... because it was dragged to the corner of the screen...

function zoomIn() {
   var scale = 1.0;
        scale=+.1;
    $('.objeto').css({'transform':'scale('+scale+')'});
} 

function  limitPage(ui, vh, vw, content_vh) {
                if ((ui.position.left + (ui.position.left / 4)) > vw) {
                    ui.position.left=-(ui.position.left - 30);
                    return false;
                } else if ((Math.abs(ui.position.left) + (Math.abs(ui.position.left) / 4)) > vw) {
                    ui.position.left=+(ui.position.left + 30);
                    return false;
                } else if ((ui.position.top + (ui.position.top / 4)) > vh) {
                    ui.position.top=-(ui.position.top - 30);
                    return false;
                } else if ((Math.abs(ui.position.top) + (Math.abs(ui.position.top) / 4)) > content_vh) {
                    ui.position.top=+(ui.position.top + 30);
                    return false;
                } 
            }

$('.objeto').draggable({

                        height :'auto',
                        cursor: 'grabbing',
                        // revertDuration: 250,
                        zIndex: 3,
                        start: function (event, ui) {
                        },
                        drag: function (event, ui) {

                              var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
                var content_vh = (vw * 2) - (vw / 2);
                                  
                var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
                            return limitPage(ui, vh, vw, content_vh);  
                        },
                        stop: function (event, ui) {
                        }
                    });
javascript jquery jquery-ui ui-draggable

  • Good morning Ivan, I do not know if you have solved, if you can put a testable example on some online platform I think would be better. Here complained about $('.object'). css('Transform':'Scale('+Scale+')'); in the zoom function, I switched to 1 parameter only $('.object'). css('Transform: Scale('+Scale+')'); for to pass two parameters would be comma.

  • @Cleverson, my fault, was supposed to be an object parameter.

1 answer

0


I decided here, actually I did not need to think about the element through the dragabble event, but in the rendered element that uses draggable, every time I call the zoom tool, I reposition the element by passing style to the same:

 var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0), canvas = document.getElementById('meu_objeto');
  if (isZoom) {
 /* Aqui em baixo estou capturando a largura da tela, 
    removendo a largura do elemento arrastado mais 
    as duas margens totais 150px, que seria 75px de cada lado, 
    dividindo por dois, tenho a distância do elemento que seria
    arrastado reposicionado ao centro
 */
    var size =  (vw - (canvas.width + 150)) / 2; 
     canvas.style.position = 'absolute';
     canvas.style.left = size+'px';
     canvas.style.top = 0;
     canvas.style.zIndex = 'auto';
  }

There was no need to make a Rigger, just reposition the element.

Browser other questions tagged javascript jquery jquery-ui ui-draggable

You are not signed in. Login or sign up in order to post.