@atlaskit/pragmatic-drag-and-drop-docs/constellation/05-core-package/index.mdx

This package holds the documentation for Pragmatic drag and drop in one place. It is not intended to be consumed directly by consumers. The package is used by other tools for sharing examples

---
order: 0
---

import SectionMessage from '@atlaskit/section-message';

The **core package** of Pragmatic drag and drop includes all the essential building blocks for any
drag and drop experience. The **core package** is vanillaJS library (authored in TypeScript) that
can be used with any view library (eg `react`, `svelte`, `vue` etc).

```bash
# install the core package
yarn add @atlaskit/pragmatic-drag-and-drop
```

Pragmatic drag and drop is optimised for performance. A key way this is achieved is by only
requiring you include the code you actually use for your experience. Within the **core package**,
there are many optional pieces, which are separated into their own entry points

For example:

- [The element adapter](/components/pragmatic-drag-and-drop/core-package/adapters/element):
  `/element/adapter` (`@atlaskit/pragmatic-drag-and-drop/element/adapter`)
- [An array reordering utility](/components/pragmatic-drag-and-drop/core-package/utilities):
  `/reorder` (`atlaskit/pragmatic-drag-and-drop/reorder`)

And many more!

You can also use our [optional packages](/components/pragmatic-drag-and-drop/optional-packages) to
streamline the building of your experiences if you want to. Some of these optional packages are tied
to specific view technologies (eg `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator` uses
`react` for rendering and `emotion` for styling), and those dependencies are made clear in the
packages documentation. Where possible, packages don't have any dependency on a view technology (eg
`@atlaskit/pragmatic-drag-and-drop-hitbox` for hitbox information).

<SectionMessage appearance="success">

Be sure to check out our [tutorial](/components/pragmatic-drag-and-drop/tutorial) to see how to
quickly wire up an experience with Pragmatic drag and drop.

</SectionMessage>

### Adapters

An _adapter_ teaches Pragmatic drag and drop how to handle dragging a particular entity:

- [element adapter](/components/pragmatic-drag-and-drop/core-package/adapters/element) → handling
  the dragging of draggable elements
- [text selection adapter](/components/pragmatic-drag-and-drop/core-package/adapters/text-selection)
  → handling the dragging of text selections
- [external adapter](/components/pragmatic-drag-and-drop/core-package/adapters/external) → handling
  drag operations that started outside of the current `window` (eg files and text from other
  `window`s or applications)

A drag adapter always provides at least two pieces:

1. A way of registering [drop target](/components/pragmatic-drag-and-drop/core-package/drop-targets)
   (eg `dropTargetForElements`).
2. A way to create a [monitor](/components/pragmatic-drag-and-drop/core-package/monitors) (eg
   `monitorForExternal`).

```ts
import {
	dropTargetForExternal,
	monitorForExternal,
} from '@atlaskit/pragmatic-drag-and-drop/external/adapter';

import {
	dropTargetForElements,
	monitorForElements,
} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

import {
	dropTargetForTextSelection,
	monitorForTextSelection,
} from '@atlaskit/pragmatic-drag-and-drop/text-selection/adapter';
```

An adapter can also provide additional pieces. For example, the
[element adapter](/components/pragmatic-drag-and-drop/core-package/adapters/element) provides a
`draggable()` function which is a way of registering a `HTMLElement` as being draggable.

```ts
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

const cleanup = draggable({
	element: myElement,
});
```

### Drop targets

An `Element` that can be dropped upon by something that is dragging.

```ts
import { dropTargetForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';

const cleanup = dropTargetForExternal({
	element: myElement,
});
```

Learn more about [drop targets](/components/pragmatic-drag-and-drop/core-package/drop-targets).

### Monitors

A way of listening for `@atlaskit/pragmatic-drag-and-drop` drag operation events anywhere.

```ts
import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';

const cleanup = monitorForElements({
	element: myElement,
	onDragStart: () => console.log('an element started dragging'),
});
```

Learn more about [monitors](/components/pragmatic-drag-and-drop/core-package/monitors).

### Utilities

Utilities are small helper functions for common tasks, which are included with the main drag and
drop package (e.g. `once` for simple memoization, or `combine` to collapse cleanup functions).

```ts
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';

const cleanup = combine(
	draggable({
		element: myElement,
	}),
	dropTarget({
		element: myElement,
	}),
);
```

## What's next

- Head to our [adapter documentation](/components/pragmatic-drag-and-drop/core-package/adapters) to
  start installing the pieces you need
- Learn more about our [design](/components/pragmatic-drag-and-drop/design-guidelines) and
  [accessibility](/components/pragmatic-drag-and-drop/accessibility-guidelines) guidelines.