Jump to content
Search Community

Draggable 'type' applies to all instances

kidaww test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Draggable.create(".poly", {
  bounds:"svg",
  onDragEnd(e) {
    //...
  }
});

Draggable.create('.rect', {
  type: 'x',
  onDrag(e) {
    //...
  },
  onDragEnd(e) {
    //...
  }
})
 <svg width="1920px" height="1080px" class="assemble__svg">
   <defs>
     <pattern id="img1" patternUnits="userSpaceOnUse" width="2771" height="520">
       <image preserveAspectRatio="none" xlink:href="../assets/linen.png" x="0" y="0" width="2771" height="520" />
     </pattern>
   </defs>
   <polygon class="rect" ref="drag" id="rect" index="0" points="-2300 562, 471 562, 471 1002, -2300 1002" fill="url(#img1)"/>
   <g class="poly-group" :class="{ active: stages.second }">
     <polygon class="poly" :class="{ active: isValid(1) }" id="poly-1" index="1" points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
     <polygon class="poly" :class="{ active: isValid(2) }" id="poly-2" index="2" points="320,110 400,310 270,350 223,334" style="fill:lime;stroke:purple;stroke-width:1" />
   </g>

   <image xlink:href="../assets/fake_wood.png" x="0" y="500" height="566" width="122" />
   <image xlink:href="../assets/linen-box.png" x="50" y="515" height="533" width="256" />
</svg>

All my '.poly' elements cant move vertically, until i move it horizontally... What's wrong?
 

Link to comment
Share on other sites

Hey kidaww and welcome to the GreenSock forums.

 

I put your code into a CodePen and wasn't able to reproduce the error that you're speaking of. Evidently there's something else going on.

See the Pen OJJyRWQ?editors=1000 by GreenSock (@GreenSock) on CodePen

 

Can you please create a minimal demo of your issue inside of a CodePen? You can for the pen above if you'd like. 

  • Like 2
Link to comment
Share on other sites

16 minutes ago, ZachSaucier said:

Hey kidaww and welcome to the GreenSock forums.

 

I put your code into a CodePen and wasn't able to reproduce the error that you're speaking of. Evidently there's something else going on.

 

See the Pen

See the Pen OJJyRWQ?editors=1000 by GreenSock (@GreenSock) on CodePen

by GreenSock (@GreenSock) on CodePen

 

 

Can you please create a minimal demo of your issue inside of a CodePen? You can for the pen above if you'd like. 

Hi! Thx you for codepen example, i worked with 'touch' draggable with Chrome Devtools 'Toggle Device Toolbar'. With mouse all works fine..

Link to comment
Share on other sites

7 minutes ago, kidaww said:

i worked with 'touch' draggable with Chrome Devtools 'Toggle Device Toolbar'. With mouse all works fine..

Thanks for clarifying. I see what you mean. If you go into "Toggle Device Toolbar" mode and try to scroll the polygons in the vertical direction they don't move very far.

 

However, on an actual mobile touch device I don't see the same behavior. Maybe it's an error with Chrome's dev tools? 

Link to comment
Share on other sites

21 hours ago, ZachSaucier said:

Thanks for clarifying. I see what you mean. If you go into "Toggle Device Toolbar" mode and try to scroll the polygons in the vertical direction they don't move very far.

 

However, on an actual mobile touch device I don't see the same behavior. Maybe it's an error with Chrome's dev tools? 

i tried it on touch panel today. Still doesnt start moving on Y axis.
If i remove type: 'x' on rectangle draggable it works fine, but i need this type x)

Link to comment
Share on other sites

Quote

Draggable 'type' applies to all instances

 

Yep. The problem with using type with SVG elements is that the touch-action property has to be set on the root SVG element, so it affects everything. There is no way around that. 

 

You can prevent your rect from moving vertically like this.

 

Draggable.create('.rect', {
  liveSnap: {
    y: function() {
      return 0;
    }
  }
});

 

Or you can wrap your SVG elements in divs, and create draggables from those divs.

  • Like 5
Link to comment
Share on other sites

1 hour ago, OSUblake said:

 

Yep. The problem with using type with SVG elements is that the touch-action property has to be set on the root SVG element, so it affects everything. There is no way around that. 

 

You can prevent your rect from moving vertically like this.

 


Draggable.create('.rect', {
  liveSnap: {
    y: function() {
      return 0;
    }
  }
});

 

Or you can wrap your SVG elements in divs, and create draggables from those divs.

Thank you so much!!!)

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.
×
×
  • Create New...