Dragging lag performance when there are more than 2 draggable object

[xdiepx]

I have managed to create drag and drop function. The function works but i have been having performance issue if there are more than 1 draggable object. 

Here is my code:

p.editIt = function(obj){    obj.interactive = true;    obj.buttonMode = true;    obj.mousedown = this.changeOffSet;    obj.mousemove = this.dragObj;    obj.mouseup = this.pressup;    obj.dragging = false;    obj.dataCon = new PIXI.DisplayObjectContainer();    var g = new PIXI.Graphics().beginFill(0xCCCCCC).drawRect(-10, 0, 190, 420);    obj.dataCon.bg = g;    obj.dataCon.addChild(g);    this.stageContainer.addChild(obj.dataCon);//the problem seems to be here but if i take it off i cant drag this object      obj.dataCon.interactive = true;      obj.dataCon.buttonMode = true;//-------------------------------     obj.dataCon.dragging = false;     obj.dataCon.mousedown = this.changeOffSet;     obj.dataCon.mousemove = this.dragObj;     obj.dataCon.mouseup = this.pressup;  }};

p.changeOffSet = function(e){ var targ = e.target;targ.parent.addChild(targ);var scalex = (targ.stage.getMousePosition().x / 100) * (100 / project.scaleFactor);var scaley = (targ.stage.getMousePosition().y / 100) * (100 / project.scaleFactor);targ.offset = {x: targ.x - (scalex),y: targ.y - (scaley)};targ.dragging = true;};p.dragObj = function(e){var targ = e.target;if(targ.dragging){targ.x = (targ.stage.getMousePosition().x/project.scaleFactor)+targ.offset.x;targ.y = (targ.stage.getMousePosition().y/project.scaleFactor)+targ.offset.y;}};p.pressup = function(e){var targ = e.target;targ.dragging = false;};

 

 

When there are 2 or more ".interactive = true, .buttonMode = true;"  set, my drag function gets really laggy and the object only moves when i release the mouse.

I am not sure what i am doing wrong. Any help would be brilliant. Thank you! (I am using pixijs v2.2.9)

 

 

[xdiepx]

Fixed it now.

 

Instead of "targ" it is "this".