-
Notifications
You must be signed in to change notification settings - Fork 141
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(cdk:dnd): add dnd lib for dnd sortting and moving
`cdk/drag-drop` is now deprecated, please use `cdk/dnd` instead.
- Loading branch information
Showing
83 changed files
with
4,980 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
describe.skip('useDnd.ts', () => { | ||
test('init test', () => {}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 0 | ||
title: | ||
zh: 列表拖拽排序 | ||
en: List dnd sortable | ||
--- | ||
|
||
## zh | ||
|
||
使用 `CdkDndSortable` 实现列表拖拽排序。 | ||
|
||
## en | ||
|
||
Impliment list sortting by drag-and-drop with `CdkDndSortable`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
<template> | ||
<CdkDndSortable :dataSource="dataSource" :onSortReorder="onSortReorder" :onSortChange="onSortChange"> | ||
<div ref="listRef" class="dnd-list"> | ||
<CdkDndSortableItem v-for="item in dataSource" :key="item.key" :itemKey="item.key" class="dnd-list__item"> | ||
{{ item.label }} | ||
</CdkDndSortableItem> | ||
</div> | ||
</CdkDndSortable> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { ref } from 'vue' | ||
import { type DndSortableReorderInfo, useDndAutoScroll } from '@idux/cdk/dnd' | ||
interface ListData { | ||
key: string | ||
label: string | ||
} | ||
const listRef = ref<HTMLElement>() | ||
useDndAutoScroll(listRef, { | ||
allowedAxis: 'vertical', | ||
canScroll: true, | ||
}) | ||
const dataSource = ref<ListData[]>( | ||
Array.from({ length: 30 }).map((_, idx) => { | ||
return { | ||
key: `key-${idx}`, | ||
label: `list item ${idx}`, | ||
} | ||
}), | ||
) | ||
const onSortReorder = (reorderInfo: DndSortableReorderInfo) => { | ||
console.log('onSortReorder', reorderInfo) | ||
} | ||
const onSortChange = (newData: ListData[], oldData: ListData[]) => { | ||
console.log('onSortChange', newData, oldData) | ||
dataSource.value = newData | ||
} | ||
</script> | ||
|
||
<style scoped lang="less"> | ||
.dnd-list { | ||
display: flex; | ||
flex-direction: column; | ||
width: 300px; | ||
height: 500px; | ||
overflow-y: auto; | ||
border: 1px solid red; | ||
&__item { | ||
display: flex; | ||
align-items: center; | ||
flex-shrink: 0; | ||
width: 100%; | ||
height: 48px; | ||
padding: 0 16px; | ||
&:not(&:last-child) { | ||
border-bottom: 1px solid red; | ||
} | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 40 | ||
title: | ||
zh: 拖拽移动 | ||
en: Drag move | ||
--- | ||
|
||
## zh | ||
|
||
使用 `CdkDndMovable` 实现元素拖拽移动。 | ||
|
||
## en | ||
|
||
Impliment element dragging with `CdkDndMovable`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,109 @@ | ||
<template> | ||
<IxSpace vertical> | ||
<div class="dnd-movable-wrapper"> | ||
<CdkDndMovable class="dnd-movable-item" :mode="mode" :strategy="strategy" :allowedAxis="allowedAxis"> | ||
<CdkDndMovableHandle v-if="useHandle" class="dnd-movable-item__handle"> | ||
<IxIcon name="holder" /> | ||
</CdkDndMovableHandle> | ||
<div class="dnd-movable-item__inner"> Drag Me </div> | ||
</CdkDndMovable> | ||
</div> | ||
<IxSpace vertical> | ||
<IxSpace> | ||
<span>strategy: </span> | ||
<IxRadioGroup v-model:value="strategy" :dataSource="strategies" /> | ||
</IxSpace> | ||
<IxSpace> | ||
<span>mode: </span> | ||
<IxRadioGroup v-model:value="mode" :dataSource="modes" /> | ||
</IxSpace> | ||
<IxSpace> | ||
<span>allowedAxis: </span> | ||
<IxRadioGroup v-model:value="allowedAxis" :dataSource="axises" /> | ||
</IxSpace> | ||
<IxSpace> | ||
<span>use drag handle: </span> | ||
<IxSwitch v-model:checked="useHandle" /> | ||
</IxSpace> | ||
</IxSpace> | ||
</IxSpace> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import type { Axis, DndMovableMode, DndMovableStrategy } from '@idux/cdk/dnd' | ||
import type { RadioData } from '@idux/components/radio' | ||
import { ref } from 'vue' | ||
const strategy = ref<DndMovableStrategy>('transform') | ||
const mode = ref<DndMovableMode>('afterDrop') | ||
const allowedAxis = ref<Axis>('all') | ||
const useHandle = ref<boolean>(false) | ||
const strategies: RadioData[] = [ | ||
{ | ||
key: 'transform', | ||
label: 'transform', | ||
}, | ||
{ | ||
key: 'absolute', | ||
label: 'absolute', | ||
}, | ||
{ | ||
key: 'fixed', | ||
label: 'fixed', | ||
}, | ||
] | ||
const modes: RadioData[] = [ | ||
{ | ||
key: 'afterDrop', | ||
label: 'afterDrop', | ||
}, | ||
{ | ||
key: 'immediate', | ||
label: 'immediate', | ||
}, | ||
] | ||
const axises: RadioData[] = [ | ||
{ | ||
key: 'all', | ||
label: 'all', | ||
}, | ||
{ | ||
key: 'horizontal', | ||
label: 'horizontal', | ||
}, | ||
{ | ||
key: 'vertical', | ||
label: 'vertical', | ||
}, | ||
] | ||
</script> | ||
|
||
<style scoped lang="less"> | ||
.dnd-movable-wrapper { | ||
width: 100%; | ||
height: 300px; | ||
position: relative; | ||
} | ||
.dnd-movable-item { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
width: 100px; | ||
height: 50px; | ||
background-color: red; | ||
border-radius: 3px; | ||
font-size: 14px; | ||
font-weight: 600; | ||
&__handle { | ||
width: 30px; | ||
height: 30px; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
font-size: 24px; | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 50 | ||
title: | ||
zh: 拖拽移动(设置边界) | ||
en: Drag move with boundary | ||
--- | ||
|
||
## zh | ||
|
||
配置 `CdkDndMovable` 的 `boundary` 属性设置拖拽移动边界。 | ||
|
||
## en | ||
|
||
Configure dragging move boundary by setting `boundary` prop of `CdkDndMovable`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
<template> | ||
<IxSpace vertical> | ||
<div ref="boundaryRef" class="dnd-movable-wrapper"> | ||
<CdkDndMovable class="dnd-movable-item" :mode="mode" :strategy="strategy" :boundary="boundaryRef"> | ||
<div class="dnd-movable-item__inner"> Drag Me </div> | ||
</CdkDndMovable> | ||
</div> | ||
<IxSpace vertical> | ||
<IxSpace> | ||
<span>strategy: </span> | ||
<IxRadioGroup v-model:value="strategy" :dataSource="strategies" /> | ||
</IxSpace> | ||
<IxSpace> | ||
<span>mode: </span> | ||
<IxRadioGroup v-model:value="mode" :dataSource="modes" /> | ||
</IxSpace> | ||
</IxSpace> | ||
</IxSpace> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import type { DndMovableMode, DndMovableStrategy } from '@idux/cdk/dnd' | ||
import type { RadioData } from '@idux/components/radio' | ||
import { ref } from 'vue' | ||
const strategy = ref<DndMovableStrategy>('transform') | ||
const mode = ref<DndMovableMode>('afterDrop') | ||
const boundaryRef = ref<HTMLElement>() | ||
const strategies: RadioData[] = [ | ||
{ | ||
key: 'transform', | ||
label: 'transform', | ||
}, | ||
{ | ||
key: 'absolute', | ||
label: 'absolute', | ||
}, | ||
{ | ||
key: 'fixed', | ||
label: 'fixed', | ||
}, | ||
] | ||
const modes: RadioData[] = [ | ||
{ | ||
key: 'afterDrop', | ||
label: 'afterDrop', | ||
}, | ||
{ | ||
key: 'immediate', | ||
label: 'immediate', | ||
}, | ||
] | ||
</script> | ||
|
||
<style scoped lang="less"> | ||
.dnd-movable-wrapper { | ||
width: 300px; | ||
height: 300px; | ||
position: relative; | ||
border: 1px solid red; | ||
} | ||
.dnd-movable-item { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
width: 100px; | ||
height: 50px; | ||
background-color: red; | ||
border-radius: 3px; | ||
font-size: 14px; | ||
font-weight: 600; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
--- | ||
order: 60 | ||
title: | ||
zh: 拖拽移动(设置拖放目标) | ||
en: Drag move with targets | ||
--- | ||
|
||
## zh | ||
|
||
配置 `CdkDndMovable` 的 `dropTargets` 属性设置拖拽移动的目标元素。 | ||
|
||
仅支持 `mode` 为 `afterDrop` 的方式。 | ||
|
||
## en | ||
|
||
Configure dragging move targets by setting `dropTargets` prop of `CdkDndMovable`. | ||
|
||
Only supported under `afterDrop` mode. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
<template> | ||
<IxSpace vertical :gap="50"> | ||
<IxSpace> | ||
<div ref="box1" class="dnd-movable-drop-box">box1</div> | ||
<div ref="box2" class="dnd-movable-drop-box">box2</div> | ||
</IxSpace> | ||
<IxSpace> | ||
<CdkDndMovable class="dnd-movable-item" :mode="mode" :dropTargets="[box1]"> | ||
<div class="dnd-movable-item__inner"> Drag To Box1 </div> | ||
</CdkDndMovable> | ||
<CdkDndMovable class="dnd-movable-item" :mode="mode" :dropTargets="[box2]"> | ||
<div class="dnd-movable-item__inner"> Drag To Box2 </div> | ||
</CdkDndMovable> | ||
<CdkDndMovable class="dnd-movable-item" :mode="mode" :dropTargets="[box1, box2]"> | ||
<div class="dnd-movable-item__inner"> Drag To All </div> | ||
</CdkDndMovable> | ||
</IxSpace> | ||
</IxSpace> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import type { DndMovableMode } from '@idux/cdk/dnd' | ||
import { ref } from 'vue' | ||
const mode = ref<DndMovableMode>('afterDrop') | ||
const box1 = ref<HTMLElement>() | ||
const box2 = ref<HTMLElement>() | ||
</script> | ||
|
||
<style scoped lang="less"> | ||
.dnd-movable-drop-box { | ||
width: 300px; | ||
height: 300px; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
font-size: 30; | ||
border: 1px solid red; | ||
} | ||
.dnd-movable-item { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
width: 100px; | ||
height: 50px; | ||
background-color: red; | ||
border-radius: 3px; | ||
font-size: 14px; | ||
font-weight: 600; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 20 | ||
title: | ||
zh: 拖拽预览 | ||
en: Drag preview | ||
--- | ||
|
||
## zh | ||
|
||
设置拖拽元素的预览。 | ||
|
||
## en | ||
|
||
Set preview of item being dragged. |
Oops, something went wrong.