What is Draggable?

As we all are aware that Shopify is ever-evolving and brings in new features for its users every now and then. Draggable is the new edition in the kitty and is a developer tool that provides a modular drag and drop library which allows the users to start building up the features they need. The users can start small and keep on adding if need be.

Draggable gives users drag and drop functionality, accessible mark-up, fast DOM reordering and other features to make it easy for the users of Shopify. It works through most interaction mediums, such as Mouse, touch, and force touch, and with accessible keyboard support coming soon.

With Draggable one can get complete control over drag and drop behaviour! One of the functions of Draggable is that it abstracts native browser events into a comprehensive API to create a custom drag and drop experience.

Draggable also comes with additional modules: Sortable, Swappable, and Droppable. Draggable but does the heavy lifting work like creating a mirror, emitting events, managing sensor events, and making elements draggable.

The additional modules have a similar API interface as they are built on top of Draggable. Some of its features are –

Features Of Draggable – 

• Works with native drag, mouse, touch and force touch events
• By hooking into draggable event life cycle, it can extend dragging behaviour
• Extend drag detection by adding sensors to draggable
• The library is targeted ES6 first
• Instant visibility of your actions and their results

Swappable –

The classic switcheroo allows the users to drag one element over another and watch them trade places in the DOM. This functionality is best suited for when layout dimensions need to be retained.

Sortable –

With this feature, you can now sort DOM nodes with style. Drag items in a collection from one place to another and view everything snapping into place. It is fast and responsive that won’t leave your performance wallet strapped for frames and gives you exactly what you are looking for.

Collidable –

Kick start your game development journey and inject some collision detection into it. Collidable is a feature that prevents draggable elements from overlapping each other, eliminating collision events when the dragged source element enters and exits a restricted zone.

Some of the properties and advantages of the tool are –

Accessible –

Drag & drop accessibility is a delicate tool and is very useful. While browsers continue to work on a reliable native solution, Draggable facilitates by providing all the proper aria attributes to be available in the right places. Also, you do not have to have intensive knowledge about codes to use this tool.

One of the primary reasons why drag and drop option is created is to give an opportunity to those with less than technical expertise in this field.

Extensive –

Draggable is easily extendable. If you require a module that is not available already, you can write a custom module for the functionality you need and submit it to GitHub repo for review. Chances are that many others like you may require the same functionality and you can share it with others.

Animation –

Nothing annoys the developer more than interrupting their personal design. Draggable isn’t such a tool to get into the way of a designer’s personal touch and steal the show by forcing any unruly animation styles. You can simply take your pick from a serving of CSS selectors and style to your heart’s desire. You can design your website as per your requirements.

Where to Get it?

The tool is still in its beta version and can be installed via npm.

npm install @Shopify/draggable –save

or via yarn:

yarn add @Shopify/draggable

For further documentation, you can refer the following links for each module within their respective directories.

• Draggable
  • DragEvent
  • DraggableEvent
  • MirrorEvent
  • Plugins
    • Accessibility
    • Mirror
  • Sensors
    • DragSensor
    • ForceTouchSensor
    • MouseSensor
    • Sensor
    • SensorEvent
    • TouchSensor
• Droppable
  • DroppableEvent
• Plugins
  • Collidable
  • Snappable
  • SwapAnimation
• Sortable
  • SortableEvent
• Swappable
  • SwappableEvent

For further consultation and development needs for your Shopify store, you can contact WebBee Global. The development teams at WebBee have extensive knowledge about Shopify platform and can guide you in the right direction towards the use of its features.

WebBee helps you to improve your e-commerce conversion rate and Shopify Development, Magento Website Development with complete e-commerce solution.