एम्बेडेड एसवीजी में घटनाओं को खींचें और छोड़ें?

Question

क्या वेब पेज के भीतर एसवीजी तत्वों से ड्रैग और ड्रॉप ईवेंट प्राप्त करने की कोई संभावना है?

मैंने Google क्लोजर लाइब्रेरी की कोशिश नहीं की, इसका कोई फायदा नहीं हुआ।

विशेष रूप से, लगता है मेरा पेज

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

होता है और मेरी स्क्रिप्ट (Clojurescript/सी 2)

(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))) 

तब मैं एक खींचें छवि (भूत) मिलता है होता है, हालांकि मुझे नहीं पता ड्रैग इवेंट्स जैसे प्राप्त करने के लिए प्रबंधन करें

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

कर एसवीजी तत्वों के लिए इसी तरह के कोड का उपयोग करके, मैं भी एक भूत नहीं मिलता ...

किसी भी संकेत?

धन्यवाद

Answer 1

खींचें घटनाओं एसवीजी तत्वों पर समर्थित नहीं हैं: http://www.w3.org/TR/SVG/svgdom.html#RelationshipWithDOM2Events।

आप माउस घटनाओं के साथ ड्रैग घटनाओं को नकली कर सकते हैं, http://svg-whiz.com/svg/DragAndDrop.svg देखें (स्रोत देखें)।

Answer 2

आप इसे हमेशा कार्यान्वित कर सकते हैं। असल में, आपको यह जांचना होगा कि जब आप खींच रहे हैं तो तत्व किसी अन्य को स्पर्श कर रहा है:

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; 
     } 
    }; 

और यह सभी ब्राउज़रों में काम करता है। उम्मीद है कि यह मदद करता है :)