Skip to main content

Draggable Background Service

The DraggableBackgroundService class provides utility methods to enable and manage draggable background functionality on DOM elements using the backgroundDraggable jQuery plugin.

Methods​

enableDraggableImage(element, onImageDragCompleteCallback, onMouseDown)​

Enables the draggable background functionality on the given DOM element.

Parameters​

  • element (HTMLElement): The DOM element or jQuery selector to apply the draggable background to.
  • onImageDragCompleteCallback (function): A function to be called once dragging is completed.
  • onMouseDown (function): A function to be called once dragging is started.

Behavior​

  • Will not apply if:
    • The element already has the dd-draggable class.
    • The element does not exist in the DOM.

Example​

digideckCore.draggableBackgroundService.enableDraggableImage(myElement, () => {
    console.log('Drag finished!');
});

clearDraggableBackgroundSettings(element)​

Clears any background draggable settings from the specified element.

Parameters​

  • element (HTMLElement): The DOM element or selector to clear settings for.

Example​

digideckCore.draggableBackgroundService.clearDraggableBackgroundSettings(myElement);

removeDraggableBackgroundListeners(element)​

Removes all event listeners associated with draggable background functionality from the specified element.

Parameters​

  • element (HTMLElement): The DOM element or selector to remove listeners from.

Example​

digideckCore.draggableBackgroundService.removeDraggableBackgroundListeners('#image-container');

📎 Notes​

  • Requires the jQuery plugin backgroundDraggable to be available and properly initialized.
  • Ensure elements passed into methods are available in the DOM when calling.