Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Keaton88

Draggable shifting after dynamically setting on new elements.

Recommended Posts

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.
Link to comment
Share on other sites

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;
  }, 
  //...
});
  • Like 2
Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×