Draggable shifting after dynamically setting on new elements.

[Keaton88]

Hi,

 

I have a weird behavior happening with the Draggable utility.

 

my project has the drag being set dynamically after i morph the svg path, into the correct structure.

(building this with Angular2 and Typescript,  PM for a link to the site. it is not in codepen but will be very easy to see the code in app.component.ts)

el  is equal to the element which was just created.

Draggable.create(el, {
            type:"x,y", 
            edgeResistance:0.5, 
            bounds:document.getElementById("canvas"), 
            throwProps:true,
            snap:{
                x:function(endValue:number){
                    return Math.round(endValue/10)*10;
                }},
            onPress:()=>{this.dragging=true;},
            onDragStart:()=>{},
            onDragEnd:()=>{
                this.dragging=false;
            }    
});

after the element is created it's fine, but if i drag it there is a slight shift over to the right of about 25px.

if i draw new elements the new element gets the shift, and the others work no problem.  it's always the last element drawn which shifts.  

was wondering if anyone else has had this experience.

 

Any help would be greatly appreciated.

[OSUblake]

It would help if you could make a CodePen. Here's an example of how to get Angular 2 working in CodePen.

See the Pen ZWybep?editors=0010 by osublake (@osublake) on CodePen

 

But it sounds like you need to update your Draggable instance. You can't reference your Draggable instance using 'this' with fat arrow functions because they aren't scoped.

var draggable = new Draggable(el, {
  onPress: () => {
    draggable.update();
    this.dragging = true;
  }, 
  //...
});

[Keaton88]

the this.dragging is on the component and not in the dragging instance.  it's a drawing application which cleans up the image to one of a set list of characters, based on what you draw, the dragging aspect is to place them in the correct location as i do not expect the users to draw them exactly where they are needed from start to finish.  

sending a PM with a link to the application.   please let me know if this helps explain the problem.