임베디드 SVG에서 이벤트 끌어서 놓기?

웹 페이지 내의 SVG 요소에서 드래그 앤 드롭 이벤트를받을 가능성이 있습니까?임베디드 SVG에서 이벤트 끌어서 놓기?

Google 폐쇄 라이브러리를 사용해 보았습니다. 내가하지 않지만

특히, 가정 내 페이지

<ul id = "list"> 
    <li class="item" id="item1">foo</li> 
    <li class="item">bar</li> 
    <li class="item">baz</li> 
</ul>

가 포함 그리고 내 스크립트 (Clojurescript/C2) 다음

(let [items (select-all ".item") 
     lst (select "#list") 
     target (fx/DragDrop. lst nil)] 
    (dorun (map 
    (fn [item] 
     (let [source (fx/DragDrop. item nil)] 
     (. source (addTarget target)) 
     (. source (init)))) 
    items)) 
    (. target (init)))

내가 드래그 이미지 (고스트)를 얻을 할 포함 끌기 사건을받는 것을 처리하십시오 SVG 요소에 대한 유사한 코드를 사용

(on-raw "#item1" :dragstart (fn [e] (.log js/console (str "dragstart " e))))

을 수행하여, 난 유령을하지 않습니다 ...

어떤 힌트가?

감사

출처

2012-09-05 Rom1

드래그 이벤트는 SVG 요소에서 지원되지 않습니다 : http://www.w3.org/TR/SVG/svgdom.html#RelationshipWithDOM2Events.

마우스 이벤트로 드래그 이벤트를 위장 할 수 있습니다. http://svg-whiz.com/svg/DragAndDrop.svg (소스보기)을 참조하십시오.

출처

2012-09-05 19:10:30 Duopixel

이것이 표준의 일부는 아니지만 일부 브라우저에서 지원하기를 원했고 SVG 용 끌어서 놓기를 캡슐화하는 JS 라이브러리를 사용할 수 있기를 기대했습니다. ... 예를 들어 주셔서 감사합니다! – Rom1

Opera는 svg 요소에 드래그 이벤트를 지원합니다 (다른 HTML5 요소와 동일). –

실제로 그렇습니다! 문제는 내 코드 또는 C2 또는 Google 클로저와 Opera가 잘 어울리는 것 같지 않습니다 ('webkitMatchesSelector' 또는 이와 관련하여 이상한 오류가 발생합니다 ...). 다른 브라우저가 정장을 따를 지 알고 있습니까? – Rom1

언제든지 구현할 수 있습니다. 기본적으로 드래그 할 때 요소가 다른 요소를 만지는지 확인해야합니다.

this.isTouching = function(element){ 
     if(this.x <= element.x && element.x <= (this.x + this.width) && 
      this.y <= element.y && element.y <= (this.y + this.height)){ 
      return true; 
     }else{ 
      return false; 
     } 
    };

그리고 모든 브라우저에서 작동합니다. 도움이 되길 바랍니다.

출처

2015-07-29 05:46:19

임베디드 SVG에서 이벤트 끌어서 놓기?

답변

관련 문제