Pan Svg При перетаскивании элементов

Question

Я хочу достичь «панорамирования» в svg, «перетаскивая» элемент в определенном направлении.

Скажите, что я выбираю элемент и начинаю «перетаскивать» его вверх, пока он не достигнет вершины экрана, теперь мой svg должен автоматически катиться вверх, не вызывая никаких проблем с перетаскиванием. как я могу это достичь.?

Я сделал небольшой макет этого, где пользователь может выбирать и перетаскивать элементы. он также содержит две кнопки, которые заставляют svg перемещаться вверх и вниз. Я получаю «Panning», изменяя «ViewBox» svg. (я должен использовать эту логику, я не могу использовать какое-либо другое решение);

здесь ссылка скрипку: http://jsfiddle.net/9J25r/

Полный код: -

addEventListener('mousedown', mousedown, false); 
      var mx, my; 
      var dx, dy; 
      var mainsvg = document.getElementById('svg'); 
      var selectedElement; 
      var eleTx, eleTy; 

      function getSvgCordinates(event) { 

       var m = mainsvg.getScreenCTM(); 
       var p = mainsvg.createSVGPoint(); 

       var x, y; 

       x = event.pageX; 
       y = event.pageY; 

       p.x = x; 
       p.y = y; 
       p = p.matrixTransform(m.inverse()); 

       x = p.x; 
       y = p.y; 

       x = parseFloat(x.toFixed(3)); 
       y = parseFloat(y.toFixed(3)); 

       return {x: x, y: y}; 
      } 

      function mousedown(event) { 
       if (event.target.id === 'arrow_t') { 
        panning('up'); 
       } 
       else if (event.target.id === 'arrow_b') { 
        panning('down'); 
       } 
       else if (event.target.id.split('_')[0] === 'rect') { 

        selectedElement = event.target; 
        var translatexy = selectedElement.getAttribute('transform'); 
        translatexy = translatexy.split('('); 
        translatexy = translatexy[1].split(','); 

        eleTx = translatexy[0]; 
        translatexy = translatexy[1].split(')'); 
        eleTy = translatexy[0]; 

        eleTx = parseFloat(eleTx); 
        eleTy = parseFloat(eleTy); 

        var xy = getSvgCordinates(event); 

        mx = xy.x; 
        my = xy.y; 

        mx = parseFloat(mx); 
        my = parseFloat(my); 

        addEventListener('mousemove', drag, false); 
        addEventListener('mouseup', mouseup, false); 
       } 
      } 

      function drag(event) { 
       var xy = getSvgCordinates(event); 
       dx = xy.x - mx; 
       dy = xy.y - my; 

       selectedElement.setAttribute('transform', 'translate(' + (eleTx + dx) + ',' + (eleTy + dy) + ')'); 
      } 
      function mouseup(event) { 


       removeEventListener('mousemove', drag, false); 
       removeEventListener('mouseup', mouseup, false); 

      } 

      function panning(direction) { 
       var viewBox = svg.getAttribute('viewBox'); 
       viewBox = viewBox.split(' '); 
       var y = parseFloat(viewBox[1]); 
       if (direction === 'up') 
       { 
        y+=5; 
       } 
       else if (direction === 'down') 
       { 
        y-=5; 
       } 

       viewBox=viewBox[0]+' '+y+' '+viewBox[2]+' '+viewBox[3]; 
       svg.setAttribute('viewBox',viewBox); 
      } 

здесь скрипка ссылка: http://jsfiddle.net/9J25r/

EDIT: - (ДОПОЛНЕНО)

Я использую решение Яна, он хорошо работает на образце, но когда я применил ее к моей первоначальной заявке, это не сработало. проверьте ниже gif. Вы можете увидеть «пробел» между указателем мыши и элементом. как я могу это удалить? ,

Answer 1

Это один из способов, я только что сделал это с Y/вертикали на данный момент ...

Вы можете настроить его, так что, если курсор находится вне экран также автоматически настраивает viewBox, зависит от того, как вы хотите его перетащить (в противном случае вам нужно будет пошатнуть его, чтобы вытащить функцию drag fun).

var viewBox = svg.getAttribute('viewBox'); 
viewBoxSplit = viewBox.split(' '); 

if(ely < viewBoxSplit[1]) { 
     panning('down'); 
} else if(ely + +event.target.getAttribute('height')> +viewBoxSplit[1] + 300) { 
     panning('up'); 
} 

jsfiddle here