snap.svg에서 끌기 이벤트를 수동으로 트리거

Question

Snap.svg에서 수동으로 끌어 오기 이벤트를 트리거 할 수 있습니까?

나는 Element : Element.drag (dragMove, dragStart, dragEnd)에 드래그 이벤트를 첨부하고이 이벤트를 프로그래밍 방식으로 트리거하고 싶습니다.

나는 Element.events [i] .f()를 호출하는 이벤트를 트리거하려했는데, 여기서 i는 드래그 이벤트를 나타내지 만 작동하지 않는 것 같습니다.

Answer 1

스냅 내에서 어떤 식 으로든 생각할 수 없습니다. 아마도 당신이 이벤트를 가짜로 만들어서 원하는대로 보내면 어떨지 궁금합니다 (아마도 jquery가 유용 할 것입니다).

드래그를 에뮬레이션하는 것이 매우 까다 롭다 고 가정하기 때문에이 기능을 호출하는 것보다 이점이 있는지 확실하지 않습니다. 그래서 필요한 부분을 놓칠 수도 있지만 아이디어가 될 수 있습니다! 당신이 당신의 요소에 대해 단지 dragStart, dragMove 및 dragEnd을 정의한 경우

s = Snap(400, 620); 

var r = s.rect(10,10,100,100); 

r.click(function() { console.log('click') }); 

r.drag( 
    function(x,y) { 
     console.log('move',x,y); 
     this.transform('t' + x + "," + y); 
    }, 

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

    function() { 
     console.log('end'); 
    } 
); 


var e = new Event("mousedown"); 
e.clientX = 34; 
e.clientY = 35; 
r.node.dispatchEvent(e); //not sure if dispatch works on all browsers 

var m = new Event("mousemove"); 
m.clientX = 40; 
m.clientY = 40; 
document.dispatchEvent(m); 

var u = new Event("mouseup"); 
document.dispatchEvent(u); 

Answer 2

그냥이 생각

jsfiddle

,

당신은 이렇게 할 수 있습니다. 내 경우에는 .tool은 SVG 영역 외부의 div입니다. 그런 다음 svg 영역 위로 마우스를 움직이면 요소가 마우스를 따라 움직입니다.

$(".tool").mousedown(function(event) { 

Element.events[0].f(event, event.clientX, event.clientY); 

}); 

물론 올바른 위치에 적용하려면 추가 코드가 필요합니다. 그러나 이것은 드래그 이벤트를 수동으로 트리거하는 방법입니다. :)