CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
muhammad umar farooq frank
muhammad umar farooq frank

Reputation: 251

Move svg viewport on mousemove of other element

I have to make drag-able svg element (viewport).

 $('.zoom_panel').mousedown(function(e) {
        if (!drag.state && e.which == 1) {
            drag.elem = $('#graph_stage svg .viewport');
            drag.state = true;
            currentX =  $(drag.elem).offset().left;
            currentY =  $(drag.elem).offset().top;
        }
        return false;
    });
    $('.zoom_panel').mousemove(function(e) {
        if (drag.state) {
            var attrs =  $(drag.elem).attr('transform').split(' ')[1];
            dx = e.offsetX - $(drag.elem).offset().left;
            dy =  e.pageY - $(drag.elem).offset().top;
            newMatrix =  'translate('+( dx )+','+( dy )+') '+attrs;
            $(drag.elem).attr('transform',newMatrix);

        }
    });

svg not move its blinking. jsfiddle

Upvotes: 2

Views: 876

Answers (1)

Thinh Nguyen
Thinh Nguyen

Reputation: 392

Try this jsfiddle

Try to set dx by using relative positions.

  dx = e.offsetX - currentX + currentdx;
  dy = e.offsetY - currentY + currentdy;

Upvotes: 1

Related Questions