You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In order for our draggable elements to have targets where they can be dropped, we need to create droppable elements. To do so, we’ll be using the useDroppable hook.
58
-
59
-
Like the useDraggable hook, the useDroppable hook requires a unique id, and returns a ref that you can attach to any element to make it droppable.
60
-
61
-
This time, we'll accept the id argument as a prop of the Droppable component.
In this example, we'll be using the [Draggable](/concepts/draggable) class to create a draggable element. We'll also need to create a [DragDropManager](/concepts/drag-drop-manager) instance to manage the drag and drop interactions.
76
42
77
-
## Putting all the pieces together
43
+
exportconst draggableCode =`
44
+
function createDraggable(manager) {
45
+
// Create a DOM element (or use an existing one)
46
+
const element = document.createElement('button');
47
+
element.innerText = 'draggable';
48
+
element.classList.add('btn');
49
+
50
+
// Make the element draggable
51
+
return new Draggable({id: 'draggable-button', element}, manager);
52
+
}
53
+
`.trim();
54
+
55
+
exportconst draggableExample =`
56
+
import {Draggable, DragDropManager} from '@dnd-kit/dom';
57
+
58
+
${draggableCode}
59
+
60
+
export default function App() {
61
+
// Create a manager to coordinate drag and drop
62
+
const manager = new DragDropManager();
63
+
64
+
// Create a draggable element
65
+
const draggable = createDraggable(manager);
66
+
67
+
// Add the draggable element to the DOM
68
+
document.body.append(draggable.element);
69
+
}
70
+
`.trim();
71
+
72
+
<CodeSandboxfiles={{
73
+
'index.js': {code: `import './styles.css';\nimport App from './app.js';\n\nApp();`, hidden: true},
In order for our draggable elements to have targets where they can be dropped, we need to create droppable elements. To do so, we'll be using the Droppable class.
89
+
90
+
Like the [Draggable](/concepts/draggable) class, the [Droppable](/concepts/droppable) class requires an element and an id as arguments.
91
+
92
+
exportconst droppableCode =`
93
+
import {Droppable, DragDropManager} from '@dnd-kit/dom';
94
+
95
+
export function createDroppable(manager) {
96
+
const element = document.createElement('div');
97
+
element.classList.add('droppable');
98
+
99
+
const droppable = new Droppable({
100
+
element,
101
+
id: 'droppable-container', // Required - must be unique
102
+
effects(){
103
+
return [
104
+
() => droppable.isDropTarget
105
+
? element.classList.add('active')
106
+
: element.classList.remove('active')
107
+
];
108
+
}
109
+
}, manager);
110
+
111
+
return droppable;
112
+
}
113
+
`.trim();
114
+
115
+
exportconst appCode =`
116
+
import {DragDropManager} from '@dnd-kit/dom';
117
+
118
+
import {createDraggable} from './Draggable.js';
119
+
import {createDroppable} from './Droppable.js';
120
+
121
+
export default function App() {
122
+
const manager = new DragDropManager();
123
+
const app = document.getElementById('app');
124
+
125
+
const draggable = createDraggable(manager);
126
+
const droppable = createDroppable(manager);
127
+
128
+
app.append(draggable.element, droppable.element);
129
+
}
130
+
`.trim();
131
+
132
+
<CodeSandboxfiles={{
133
+
'index.js': {code: `import './styles.css';\nimport App from './App.js';\n\nApp();`, hidden: true},
0 commit comments