8000 [examples] multi drag now uses new mount API · codemic-pl/react-sortablejs@0dd2f05 · GitHub
[go: up one dir, main page]
Skip to content
This repository was archived by the owner on Jan 6, 2024. It is now read-only.

Commit 0dd2f05

Browse files
author
Wayne Van Son
committed
[examples] multi drag now uses new mount API
1 parent 4d3fb26 commit 0dd2f05

File tree

1 file changed

+41
-12
lines changed

1 file changed

+41
-12
lines changed

‎examples/components/multidrag.tsx

Lines changed: 41 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,54 @@
11
import React, { useState } from "react";
22
import styled from "styled-components";
3-
import { MultiDrag, ReactSortable } from "../../src";
3+
import { MultiDrag, ReactSortable, Sortable } from "../../src";
44
import { Item, threes } from "../util";
55

6+
Sortable.mount(new MultiDrag())
7+
68
export function MultiDragExample() {
79
const [list, setList] = useState(threes);
10+
const [list1, setList1] = useState(threes);
11+
812
return (
9-
<ReactSortable
10-
multiDrag
11-
plugins={[new MultiDrag()]}
12-
list={list}
13-
setList={setList}
14-
animation={150}
15-
>
16-
{list.map(item => (
17-
<MultiDragItem key={item.id}>{item.name}</MultiDragItem>
18-
))}
19-
</ReactSortable>
13+
<Column>
14+
<ReactSortable
15+
multiDrag
16+
list={list}
17+
setList={setList}
18+
animation={150}
19+
group="shrek"
20+
>
21+
{list.map(item => (
22+
<MultiDragItem key={item.id}>{item.name}</MultiDragItem>
23+
))}
24+
</ReactSortable>
25+
<ReactSortable
26+
multiDrag
27+
list={list1}
28+
setList={setList1}
29+
animation={150}
30+
group="shrek"
31+
>
32+
{list1.map(item => (
33+
<MultiDragItem key={item.id}>{item.name}</MultiDragItem>
34+
))}
35+
</ReactSortable>
36+
</Column>
2037
);
2138
}
2239

40+
const Column = styled.div`
41+
display: flex;
42+
width: inherit;
43+
& > * {
44+
width: 100%;
45+
margin-left: 0.3rem;
46+
:first-child() {
47+
margin-left: 0rem;
48+
}
49+
}
50+
`;
51+
2352
const MultiDragItem = styled(Item)`
2453
&.sortable-selected {
2554
background-color: #0a0a;

0 commit comments

Comments
 (0)
0