Draggable: [API Request] Instantiate Draggable without a default Plugin

[kauffecup]

Currently, when instantiating a new Draggable it comes with four default plugins, defined here: https://github.com/Shopify/draggable/blob/master/src/Draggable/Draggable.js#L73, which are then initialized here: https://github.com/Shopify/draggable/blob/master/src/Draggable/Draggable.js#L149

We have a use case where we want to use draggable, but do not want all of these default plugins. Currently there are two ways to achieve this:

1

const draggable = new Draggable(node, { ...options });
draggable.removePlugin(Draggable.Plugins.Focusable);

2

delete Draggable.Plugins.Focusable
const draggable = new Draggable(node, { ...options });

The issue with #1 is if the plugin applies a visible element, for example focusable makes something focusable which'll draw an outline, you can "see" the plugin being removed. The issue with #2 is it mutates the Draggable class affecting all future instantiations across our whole project.

Our request is to provide a more "first class" way to instantiate a Draggable class without any of the default plugins

Environment

• Library version: [1.0.0-beta.8]
• Browsers: [all]
• Tech stack: [all]

[worsnupd]

I've also run up against this! Would be an extremely helpful API improvement.

[dibosh]

@kauffecup @worsnupd what about something like this? -

const draggable = new Draggable(node, { ...options });
draggable.removeDefaultPlugins();

or having some factory methods like below-

Draggable.getInstance(node, { ...options }); // comes with default plugins
const noDefaultPlugins = true;
Draggable.getInstance(node, { ...options }, noDefaultPlugins); // comes without default plugins

[kauffecup]

Sorry for missing your response!

I believe the factory methods would work better for my use case - when I did the following:

const draggable = new Draggable(node, { ...options });
draggable.removePlugin(Draggable.Plugins.Focusable);

you can "see" the plugin being removed if the plugin applies a visible element, for example focusable makes something focusable which'll draw an outline. I believe the same would happen in the first solution you mentioned

I could also see adding a defaultPlugins array to options and if undefined, add all defaults. For example:

const draggable = new Draggable(node, { ...options, defaultPlugins: [] });

would create an instance without any of the default Plugins

[dibosh]

@kauffecup makes sense. Will try to cook something this weekend.

[bahung1221]

The fix was pre-released in v1.0.0-beta.11

Now you can exclude default plugins like below:

import { Draggable } from '@shopify/draggable';

const draggable = new Draggable(document.querySelectorAll('ul'), {
  draggable: 'li',
  exclude: {
    plugins: [Draggable.Plugins.Focusable],
    sensors: [Draggable.Sensors.TouchSensor],
  }
});

Thank you so much and sorry for very very late response 😄