MCPcopy
hub / github.com/clauderic/dnd-kit / App

Function App

apps/stories-solid/stories/Sortable/Grid/GridSortableApp.tsx:24–40  ·  view source on GitHub ↗
()

Source from the content-addressed store, hash-verified

22}
23
24export default function App() {
25 const [items, setItems] = createSignal(createRange(20));
26
27 return (
28 <DragDropProvider
29 onDragEnd={(event) => {
30 setItems((items) => move(items, event));
31 }}
32 >
33 <div style={{display: 'grid', 'grid-template-columns': 'repeat(auto-fill, 150px)', 'grid-auto-rows': '150px', 'grid-auto-flow': 'dense', gap: '18px', padding: '0 30px', 'max-width': '900px', 'margin-inline': 'auto', 'justify-content': 'center'}}>
34 <For each={items()}>
35 {(id, index) => <Sortable id={id} index={index()} />}
36 </For>
37 </div>
38 </DragDropProvider>
39 );
40}
41
42function createRange(length: number) {
43 return Array.from({length}, (_, i) => i + 1);

Callers

nothing calls this directly

Calls 3

moveFunction · 0.90
createRangeFunction · 0.70
indexFunction · 0.70

Tested by

no test coverage detected