Draggable: Why another "draggable" library?

[dchenk]

I'm trying to understand why this library was developed given that there already is a JavaScript library that does essentially all the same things, namely: https://github.com/RubaXa/Sortable

This is a sincere question. What advantages does Shopify/draggable offer? Why might I want to use this library instead of the tried and tested RubaXa/Sortable?

Thank you.

[tsov]

That is a very good question, it is something we do have to justify often. This library aims to be the complete solution for Drag and Drop on the web.

We often found that

• existing libraries either have a lot of dependencies
• do one thing really good, but don't offer solutions to other problems
• are hard to customize (monolithic code bases)
• accessibility is missing
• no other libraries seems feature complete (always something missing)
• things like auto scrolling is broken or limited
• etc

The main driver for us was the flexibility and extensibility of Draggable. Things are nicely abstracted into sensors and modules that are also mostly tested. We also want to offer features that libraries currently don't offer:

• Extensibility of the library
  
  
  
  • Don't like something? Extend from Draggable core and create your own Sortable module for example
  
  
• Dragging between iframes
  
  
  
  • I don't think any library that uses mouse/touch events supports this, but we will soon
  
  
• Allowing usage with ShadowDOM (I believe RubaXa/Sortable has support for this)
• Full and complete out-of-the-box accessibility support
  
  
  
  • Keyboard accessibility (coming soon)
  
  
  • Screen reader support (which is further customizable)
  
  
  • Automatic management of focus states
  
  
• Ability to create plugins to extend drag and drop behaviour
  
  
  
  • For example add a Sensor that maps a game controller to drag and drop operations
  
  

This the main gist ^ Let me know what you think

[dchenk]

@tsov thank you very much for your detailed response—that was helpful.

I do, however, have one more remark and two more (related) questions:

• It looks like RubaXa/Sortable does support dragging across iframes: http://rubaxa.github.io/Sortable/st/iframe/ —this is indeed an important feature.
• About maintainability:
  
  
  
  • Why does Shopify sponsor this project? What's in it for the company?
  
  
  • A related question: I see that this repo has a lot of stars and watchers. Can we expect that development will continue for years to come?
  
  

Thanks for all your work!

[beefchimi]

Adding to what @tsov said, while we are very proud of draggable and intend to continue to improve it, you should always pick your dependencies carefully. Consume whatever solution works best for your project 😄

As for your question about Shopify, both @tsov and myself work at Shopify _(and on the same team!)_. The part of the product we work on happens to use drag and drop quite heavily. When first implementing drag and drop, we found that existing libraries didn't give us everything we needed, which is when @tsov started work on the very first iteration of draggable.

Most of our work on draggable happens on our own time, but the very first prototype happened during a work hours "hackathon" we did over a year ago. Seems fitting to release this under the Shopify banner 😄