Snap.svg - обработчик события перетаскивания

Question

Вопрос о обработчике событий onstart для Element.drag в объявленном Snap.svg.

Целью приведенного ниже кода является регистрация обработчиков событий для начала и остановки перетаскивания (onstart/onstop) объекта svg.

 var s = Snap(800,600); 

     var bigCircle = s.circle(300,150,100); 

     bigCircle.drag(null, 
       function(){ 
        console.log("Move started"); 
       }, 
       function(){ 
        console.log("Move stopped"); 
       } 
     ); 

Консоль сообщения работают отлично на сопротивление запуска и остановки, но нулевой приоритет по умолчанию OnMove функции - в результате никакого фактического сопротивления не происходит. Как передать что-то, что говорит: «Я не хочу возиться со стандартным onmove»?

. (Примечание: Я бы предпочел, чтобы зарегистрировать обработчик событий с помощью присваивания, как знакомый OnClick, но это совсем другое дело)

---

Примечание добавлено через несколько часов: Рафаэля. Документация js и примеры предоставляют некоторые подсказки. По крайней мере, теперь я знаю, как передать в соответствующую функцию для OnMove, что обеспечивает поведение перемещения по умолчанию:

 var s = Snap(800,600); 

     var bigCircle = s.circle(300,150,100); 

     start = function() { 
      this.ox = parseInt(this.attr("cx")); 
      this.oy = parseInt(this.attr("cy")); 
      console.log("Start move, ox=" + this.ox + ", oy=" + this.oy); 
     } 

     move = function(dx, dy) { 
      this.attr({"cx": this.ox + dx, "cy": this.oy + dy}); 
     } 

     stop = function() { 
      this.ox = parseInt(this.attr("cx")); 
      this.oy = parseInt(this.attr("cy")); 
      console.log("Stop move, ox=" + this.ox + ", oy=" + this.oy); 
     } 

     bigCircle.drag(move, start, stop); 

Answer 1

я не уверен, если я недоразумение, что вы точно хотите ... вы не хотите реализовать перетаскивание?

Так, например ...

var s = Snap(400,400); 
var bigCircle = s.circle(150, 150, 100); 

var moveFunc = function (dx, dy, posx, posy) { 
    this.attr({ cx: posx , cy: posy }); // basic drag, you would want to adjust to take care of where you grab etc. 
}; 

bigCircle.drag(moveFunc, 
      function(){ 
       console.log("Move started"); 
      }, 
      function(){ 
       console.log("Move stopped"); 
      } 
    ); 

JSBin здесь http://jsbin.com/akoCAkA/1/edit?html,js,output

Answer 2

Я не могу перетащить элементы группы с пользовательскими обработчиками, s.drag() делает это возможным. Таким образом, я искал, что нашел его возможным.

Документация:

Additionaly следующие события перетаскивания срабатывают: drag.start. на старте, drag.end. on> end и drag.move. на каждом шагу. Когда элемент перетаскивается над другим элементом> drag.over. и огни.

Решение:

s.drag(); 
    eve.on("snap.drag.start." + s.id, function() { 
     console.log('cool'); 
    }); 

    eve.on("snap.drag.move." + s.id, function() { 
     console.log('cooler'); 
    }); 

    eve.on("snap.drag.end." + s.id, function() { 
     console.log('way cool'); 
    }); 

накануне не документировано на snapsvg она доступна на Рафаила. Я не знаю, как это правильно или взломать.

Answer 3

После борьбы в течение нескольких часов, чтобы сделать это с snap.js, я, наконец, обнаружил svg.js и ее перемещаемый плагин, с помощью которого это намного проще:

var draw = SVG('svg'); 
var circle = draw.circle(10).attr({cx:30,cy:30,fill:'#f06'}); 
circle.dragend = function(delta, event) { 
    alert(this.attr('cx')) 
} 
circle.draggable(); 

Итак, я переключился на SVG. js ...

Answer 4

Метод eve.on не работал для меня, поэтому я немного пошутил и сумел воссоздать функцию onmove. Остальные два (OnStart и OnEnd) не требуют специального кода для работы, по-видимому:

var S = Snap(300,300); 

var bigCircle = S.circle(150, 150, 100); 

bigCircle.drag(onDragMove, onDragStart, onDragEnd); 

var ddx = 0; 
var ddy = 0; 
var dxDone = 0; 
var dyDone = 0; 

function onDragMove (dx, dy, posx, posy) { 
    dx = dx + dxDone; // dx and dy reset to 0 for some reason when this function begins 
    dy = dy + dyDone; // retain the last move's position as the starting point 
    this.attr({ transform: 't'+dx+','+dy }); 
    ddx = dx; 
    ddy = dy; 
    console.log('moving...'); 
}; 

function onDragStart(x,y,e) { 
    console.log('start!'); 
}; 

function onDragEnd(e) { 
    dxDone = ddx; 
    dyDone = ddy; 
    console.log('end!'); 
}; 

Пожалуйста, обратите внимание, однако, что это должно быть использовано только для один перемещаемого объекта в то время. Если вам нужен пользовательский перетаскивание для другого объекта, вам придется переименовать функции (то есть onDragStart2) и четыре переменные, объявленные вне их (т. Е. Ddx2), после их дублирования.

Кроме того, преобразованный формат 'transform', который я передал (tx, y), пришел из того, что я нашел после выполнения console.log (this.attr ('transform')). Я еще не знаком с матрицей(), так что это было проще.

Надеюсь, это поможет!

Answer 5

Существует пример, как перетащить с SnapSVG здесь: http://svg.dabbles.info/snaptut-drag.html

var s = Snap("#svgout"); 

var rect = s.rect(20,20,40,40); 
var circle = s.circle(60,150,50); 

var move = function(dx,dy) { 
     this.attr({ 
        transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy] 
       }); 
} 

var start = function() { 
     this.data('origTransform', this.transform().local); 
} 
var stop = function() { 
     console.log('finished dragging'); 
} 

rect.drag(move, start, stop); 
circle.drag(move, start, stop);