top of page

Documentation

Introduction
The Draggable Plugin is a Wix Studio plugin that integrates the Interact.js library, a JavaScript tool for drag-and-drop, resizing, and multi-touch gestures in modern browsers. It enables you to add drag-and-drop functionality to your Wix website components without writing any code. The plugin uses custom CSS classes to specify which elements are draggable and on which devices. This document will guide you on how to use these classes effectively.

Quick Start

Install the plugin, add the widget on your canvas and place it anywhere that won't interfere with your design (you can make it any size and transparent). 
Turn on dev mode, add the class draggable to the desired element. Publish your site and check it on the live site.
Video demonstration: https://youtu.be/6MJAlfTCPRM

 

Available Classes
The plugin provides four main classes for draggable elements:

draggable
draggable-desktop
draggable-tablet
draggable-mobile

Additionally, there's a utility class:

disable-z


How to Use the Classes
1. draggable
Usage: Add this class to any element you want to be draggable on all devices.
Behavior: This element will be draggable on desktop, tablet, and mobile devices.


2. draggable-desktop
Usage: Add this class to elements you want to be draggable only on larger screens (width 1001px and above).
Behavior: This element will only be draggable on devices with screen widths of 1001px or more.


3. draggable-tablet
Usage: Use this class for elements that should be draggable on medium-sized screens (between 751px and 1000px).
Behavior: This element will only be draggable on devices with screen widths between 751px and 1000px.


4. draggable-mobile
Usage: Apply this class to elements you want to be draggable on small screens (up to 750px).
Behavior: This element will only be draggable on devices with screen widths up to 750px.


5. disable-z
Usage: Add this class alongside any of the draggable classes to prevent the element from changing its z-index when dragged.
Behavior: This element will be draggable but won't automatically move to the top layer when dragged.


Best Practices

  • Responsiveness: Use a combination of classes to create a responsive draggable experience. For example: element with classes: "draggable-desktop draggable-tablet" will be draggable for desktop and mobile only.

  • Performance: Avoid making too many elements draggable, especially on mobile devices, to maintain good performance.

  • Accessibility: Ensure that draggable functionality doesn't interfere with the accessibility of your site. Provide alternative ways to interact with content that's draggable.

  • Testing: Always test your draggable elements on various devices and screen sizes to ensure they behave as expected.


Troubleshooting
If elements aren't draggable, ensure you've added the correct class and that the plugin is properly installed.
Check for any CSS that might be interfering with the position: absolute property required for draggable elements.
If z-index behavior isn't as expected, check if you've accidentally added the disable-z class.


If you encounter any issues or have questions about using the plugin please contact our support.

bottom of page