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
Post a Comment