title: optimize drag and drop with svg library & javascript
body: <p>Currently most of the SVG framework provides drag and dropping. I have used RaphaelJs , Extjs Drawing , and SVG.js(<a href="http://www.svgjs.com/" rel="nofollow">http://www.svgjs.com/</a>). All of the framework provides the event handling method by binding it with the element itself. For example:</p>
  
  <pre><code>dragStart: function(event){
      //'this' refers to the element itself
      this.doSomething();
      this.moveTo(event.x,event.y);
  };
  </code></pre>
  
  <p>However the consequences of this is that browser performance is greatly degraded, when there are more than hundred of elements and some logic processing aside. My elements will be  composite elements, meaning maybe some text or path in a rect but the rect should be the target (or this) of the event when dragged. The elements will have other event to listen to , for example onclick, onDblClick, onHover &amp; etc.</p>
  
  <p>My question is, is there any way to optimize this ? The user experience is bad after the application is showing a lot of the composite elements I mentioned above.</p>
  
  <p>UPDATE:</p>
  
  <p>I have built an application using the mean that i spoke of above. Binding the event handler to each of the objects. The result is not very user friendly when the element is listening to onhover and onmousedown events. I am thinking to optimize the application but not sure how. The effect is more obvious in FF, chrome is better. </p>