Odo Draggable

Throwable

Give it a toss.

By default, draggable instances are not throwable. Use the isThrowable option to enable it. You must also set a boundary for the throwable element, otherwise you can throw it off the screen!

// Create new draggable
var throwable = new OdoDraggable(document.getElementById('draggable-throw-me'), {
  axis: 'xy',
  isThrowable: true
});

var element = throwable.element;
var parent = element.parentNode;
var draggableWidth = element.offsetWidth;
var draggableHeight = element.offsetHeight;
var containerWidth = parent.offsetWidth;
var containerHeight = parent.offsetHeight;

var left = 0;
var top = 0;
var width = containerWidth - draggableWidth;
var height = containerHeight - draggableHeight;
var rect = new OdoHelpers.Rect(left, top, width, height);

// Set a boundary for the draggable so that it won't be thrown outside of its parent.
throwable.setLimits(rect);

More like a carousel

This example uses the same markup and css as the Odo Carousel, except the .carousel-element's width is set to fit the exact amount of slides (width is 500% instead of 2000%).

Here we follow the same steps. Set the isThrowable option and then set limits.

var freescroll = new OdoDraggable(document.getElementById('draggable-carousel'), {
  axis: 'x',
  isThrowable: true
});

var element = freescroll.element;
var parent = element.parentNode;
var draggableWidth = element.offsetWidth;
var containerWidth = parent.offsetWidth;

var left = -draggableWidth + containerWidth;
var top = 0;
var width = -left;
var height = 0;
var rect = new OdoHelpers.Rect(left, top, width, height);

freescroll.setLimits(rect);

Events

Draggable emits three events: START, MOVE, and END.

instance.on(OdoDraggable.EventType.START, function(pointerEvent) {
  console.log('drag started', pointerEvent);
});

instance.on(OdoDraggable.EventType.MOVE, function (pointerEvent) {
  console.log('drag move:', pointerEvent);
});

instance.on(OdoDraggable.EventType.END, function (pointerEvent) {
  console.log('drag ended:', pointerEvent);
});

PointerEvent

Here is the data contained within a drag end event from the first draggable on this page. There are a few simple properties here that have already determined the drag movement compared to its axis.

{
  axisDirection: "left",
  currentVelocity: {
    x: 1.88,
    y: 0.14
  }
  delta: {
    x: -32,
    y: 0
  },
  deltaTime: 203,
  didMoveOnAxis: true,
  direction: "left", // OdoPointer.Direction.LEFT
  distance: 32,
  end: {
    x: -32,
    y: 0
  },
  isDirectionOnAxis: true,
  position: {
    percent: {
      x: -3.2160804020100504,
      y: 0
    },
    pixel: {
      x: -32,
      y: 0
    },
  },
  start: {
    x: 0,
    y: 0
  },
  target: div,
  type: "ododraggable:end", // OdoDraggable.EventType.END
  velocity: {
    x: 0.15763546798029557,
    y: 0
  }
}

Disposal

To properly destroy a draggable instance, you must call the dispose method. This removes event listeners, nullifies DOM references, and performs other clean up.

xy.dispose();

Options

OdoDraggable.Defaults = {
  // Draggable axis.
  axis: OdoPointer.Axis.X,

  // Amplifies throw velocity by this value. Higher values make the throwable
  // travel farther and faster.
  amplifier: 24,

  // Once the velocity has gone below this threshold, throwing stops.
  velocityStop: 0.08,

  // On each throw frame, the velocity is multiplied by this friction value.
  // It must be less than 1. Higher values let the throwable slide farther and longer.
  throwFriction: 0.94,

  // Whether the draggable will keep its movement momentum after the user releases.
  isThrowable: false
}