Jump to content
GreenSock

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

Draggable 'type' applies to all instances

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?
 

Share this post


Link to post
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

Share this post


Link to post
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..

Share this post


Link to post
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? 

Share this post


Link to post
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)

Share this post


Link to post
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

Share this post


Link to post
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!!!)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×