[Tweening to position causes problem on page scroll]

 

I am tweening the red box on top of blue box. It works fine unless I scroll the page a little bit, in that case it breaks.

See the Pen yNVJYo by anon (@anon) on CodePen

[How to build a scrollbar using Draggable]

Draggable.create("#scrollThumb", {
  type: "y",
  bounds: "#scrollTrack",
  onDrag: function() {
    var delta = pointerEvent.movementY;

    // use delta to scroll page
  }
}

This code works fine mostly to build a scrollbar. But it moves the page a little more than usual if I drag faster. What could be a better way to prevent this issue?

[Disable Throw props for draggable while having snap]

I am talking about overshooting, I also wonder about how to constantly snap too.

[Disable Throw props for draggable while having snap]

I want draggable elements with snap functionality. But snap doesn't work without `throwProps:true`, and when throwProps is on elements keep sliding. How can I disable throwProps functionality (minimize the sliding effect) while having snap?

[Tween all boxes to the same position regardless of their initial position]

I am trying to tween all boxes to { x: 10, y: 10 } coordinates, which is supposed to be the same position. But it doesn't work.

 

 

Why do these boxes go to offset of their starting positions as opposed to absolute coordinates. I need to transform them to specified coordinates no matter what their inital position is.

See the Pen LVVQqx by anon (@anon) on CodePen

[How to cancel drag and return to the last position, if out of drop target]

There is a bug when used with `throwProps: true`. Because if thrown it can get outside the bounds and stay there. How can I fix that? I want to disable throw props but then I can't use snap feature. How can I use snap while throwProps is false?

[How to cancel drag and return to the last position, if out of drop target]

I have a table where I can drag stones all over the place. I also have a special place (stoneplace) where the stones can stay. Stones can not stay anywhere else. I need to be able to drag stones anywhere on the table but if I drop them out of stoneplace they have to revert back to their last position. How can I have this effect?

[How to offset container bounds for Draggable]

I have a Draggable, it is bounded to a container like this:

  Draggable.create(t, {type:"x,y", bounds:container, throwProps:true, liveSnap: false, snap: {
    x: function(endValue) {
      return Math.round(endValue / 38) * 38;
    },
    y: function(endValue) {
      return Math.round(endValue / 50) * 50;
    }
  }});

But I want to shrink the bounds within the container. How can I give an offset to the bounded container? Another approach is to define a dummy container that fits exactly within required bounds, but that's a little more work.