Draggable 'type' applies to all instances

[kidaww]

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?
 

[ZachSaucier]

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. 

[kidaww]

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..

[ZachSaucier]

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? 

[kidaww]

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)

[OSUblake]

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.

[kidaww]

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!!!)