javascript - Drag and drop using Raphael.js has laggy performance with more than 10 draggable elements -


i'm making simple html5 app, wrapped used on android, ios , web browsers. in app need set of points dragged , sorted in way, i'm using raphael.js animations , movememts , works fine 3 or 4 circles, when use more laggy performance appears (mobile browser). need app able draw lines on freehand, marker, , code i'm using refers drag to, performance awful. interesting part first moves work great, move more elements performance drops down drastically. works fine in pc browser, works fine 3 or 4 movements on mobie browser.

is there way make drag , drop run fast , smooth large quantity of elements?

here's code:

<!doctype html> <html lang="en">     <head>         <meta charset="utf-8">         <title>raphaĆ«l · drag-n-drop</title>         <link rel="stylesheet" href="demo.css" type="text/css" media="screen">         <meta name="apple-mobile-web-app-capable" content="yes">         <link rel="apple-touch-icon-precomposed" href="/raphael.png">         <link rel="stylesheet" href="demo-print.css" type="text/css" media="print">         <style>         #background {     width: 100%;      height: 100%;      position: fixed;      left: 0px;      top: 0px;      z-index: -1; /* ensure div tag stays behind content; -999 might work, too. */ }  .stretch {     width:100%;     height:100%; } </style>         <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>         <script src="raphael-min.js"></script>         <script>                 window.onload = function () {                 var y = $(window).height();                 var x = $(window).width();                 y=y/30;                 var posx=y;                 var posy=y;                 var posx2=x-y;                 var r = raphael(0, 0, "100%", "100%");                 var nj=10                 var jugador=new array();                 var rival=new array();                 crearjugadores(nj);                 crearrivales(nj);                 function crearjugadores(nj) {                     nj=nj;                     (var i=0;i<nj;i++)                     {                         jugador[i]= r.circle(posx, posy, y).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5});                         posy=posy+(2*y);                         };                 };                 function crearrivales(nj) {                     posx=x-y;                     posy=y;                     nj=nj;                     (var i=0;i<nj;i++)                     {                         rival[i]= r.circle(posx, posy, y).attr({fill: "#214dcf", stroke: "none", opacity: .5});                         posy=posy+(2*y);                         };                 };                 var start = function () {                     this.ox = this.attr("cx");                     this.oy = this.attr("cy");                     this.animate({r: (1.5*y), opacity: .3}, 100, ">");                 },                 move = function (dx, dy) {                     this.attr({cx: this.ox + dx, cy: this.oy + dy});                 },                 = function () {                     this.animate({r: y, opacity: 1}, 500, ">");                 };                 r.set(rival).drag(move, start, up);                 r.set(jugador).drag(move, start, up);                 initdrawing(r);                 };                             var g_masterpatharray;                         var g_masterdrawingbox;                         var g_masterpaper;                          function initdrawing(r) {                                 g_masterpaper = r;                                  var masterbackground = g_masterpaper.rect(0,0,"100%","100%");                                 masterbackground.attr({fill:"blue", opacity: 0});                                 masterbackground.mousemove(function (event) {                                         var evt = event;                                         var ie = document.all?true:false;                                         var x, y;                                         if (ie) {                                                 x = evt.clientx + document.body.scrollleft + document.documentelement.scrollleft;                                                 y = evt.clienty + document.body.scrolltop + document.documentelement.scrolltop;                                         }                                         else {                                                 x = evt.pagex;                                                 y = evt.pagey;                                         }                                          // subtract paper coords on page                                         this.ox = x;                                         this.oy = y;                                 });                                  var start = function () {                                         g_masterpatharray = new array();                                 },                                 move = function (dx, dy) {                                         if (g_masterpatharray.length == 0) {                                                 g_masterpatharray[0] = ["m",this.ox,this.oy];                                                 g_masterdrawingbox = g_masterpaper.path(g_masterpatharray);                                                 g_masterdrawingbox.attr({stroke: "#000000","stroke-width": 3});                                         }                                         else                                                 g_masterpatharray[g_masterpatharray.length] = ["l",this.ox,this.oy];                                          g_masterdrawingbox.attr({path: g_masterpatharray});                                 },                                 = function () {                                         ;                                 };                                  masterbackground.drag(move, start, up);                              masterbackground.toback();                                  }                     </script>     </head>     <body>     <div id="background">     <img src="cancha.jpg" class="stretch" alt="" /> </div>         <div id="holder"></div>     </body> </html> 

any ideas??

thanks


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -