Draggable.create(...).disable is not a function

[marcelo2605]

I'm trying to allow user drag and rotate elements based on the the position the element is clicked.

 

For that, I created two instances and keep one of them disabled. But it is returning an error:

 

Quote

Draggable.create(...).disable is not a function

 

See the Pen eXRway?editors=1010 by marcelo2605 (@marcelo2605) on CodePen

[Carl]

Hi and welcome to the GreenSock forums.

 

Thanks for the demo.

 

Draggable.create() returns an array of Draggables. You can only call disable() on a single instance of a Draggable.

https://greensock.com/docs/Utilities/Draggable/static.create()

 

To call disable() on the first element you could do:

 

rotationDrag[0].disable();

 

 

[marcelo2605]

Fixed! Here is the working code:

 

var rotationDrag = Draggable.create($(".draggable"), {
  type: "rotation",
  throwProps: true,
  onPress: setDraggable,
});


$.each(rotationDrag, function(index) {
  rotationDrag[index].disable();
});

var translateDrag = Draggable.create($(".draggable"), {
  throwProps: true,
  onPress: setDraggable,
});

function setDraggable(event) {
  var index = rotationDrag.findIndex(i => i.target === this.target);
  var isRotation = this.vars.type === "rotation";
  var isCorner   = event.target.className === 'rotate';

  if (isCorner) {
    if (!isRotation) {
      translateDrag[index].disable();
      rotationDrag[index].enable().startDrag(event);
    }
  } else if (isRotation) {
    rotationDrag[index].disable();
    translateDrag[index].enable().startDrag(event);
  }
}