Get Elements Hive

Draggable

The Draggable extension allows you to turn any element on your page into an interactive element that can be dragged around by you site visitor. It includes several features that give you the ability to easily create different effect patterns.

 

Draggable

  • Target: The target element that will be dragged
    • Self: The current element
    • Selector: The element with the given selector
  • Target Selector: The target selector ( only available when Target = Selector )
  • Trigger Element: The element that will be used as a trigger
    • Self: The current element
    • Selector: The element with the given selector
  • Trigger Selector: The trigger selector ( only available when Trigger Element = Selector )
  • Transform Type: The type of transformation that can be applied
    • Horizontal & Vertical: Element can be dragged both horizontally and vertically
    • Horizontal: Element can only be dragged horizontally
    • Vertical: Element can only be dragged vertically
  • Enable Bounding Container: Use another element as the bounding limits for the dragged element ( ie: the dragged element cannot leave the bounding container )
  • Bounding Container Selector: The selector of the bounding container
  • Enable Inertia: Apply Inertia to the element on mouse release. The element will continue to move in the given direction for a certain period of time and will take into account the applied Drag Resistance
  • Drag Resistance: Applies a friction factor to the drag movement
  • Actions: Apply actions on the element during specific events
    • On Press Action: The action to apply when you press the mouse or tap on the element
      • None: Do nothing
      • Scale: Scale the element
      • Rotate: Rotate the element
    • On Release Action: The action to apply when you release the element
      • None: Do nothing
      • Reset Position: Return the element to its default position
      • Scale: Scale the element
      • Rotate: Rotate the element
    • Scale: The scale value
    • Rotation Angle: The rotation angle
    • Animation Duration: The duration of the animation
    • Animation Delay: The delay before the animation starts ( Only applies to On Release Actions )
    • Easing: The easing function to apply
  • Disable on Touch Devices: Disable the extension on touch-capable device