forked from IDuxFE/idux
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(comp:modal): add draggable props (IDuxFE#905)
feat(cdk:drag-drop): add handle&resetPosition api
- Loading branch information
Showing
14 changed files
with
228 additions
and
25 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,12 @@ | ||
--- | ||
order: 2 | ||
title: | ||
zh: 通过把手的自由拖拽 | ||
en: handle usage | ||
--- | ||
|
||
## zh | ||
|
||
可通过把手对整体进行拖拽 | ||
|
||
## en |
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,17 @@ | ||
<template> | ||
<div ref="dragRef" :style="{ border: '1px dashed gray' }"> | ||
<IxButton ref="dragHandleRef">局部拖放</IxButton> | ||
通过把柄拖动整体 | ||
</div> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { ref } from 'vue' | ||
import { useDraggable } from '../src/composables/useDraggable' | ||
const dragRef = ref(null) | ||
const dragHandleRef = ref(null) | ||
useDraggable(dragRef, { handle: dragHandleRef, free: true }) | ||
</script> |
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
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
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
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
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,32 @@ | ||
/** | ||
* @license | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE | ||
*/ | ||
|
||
import type { DnDContext } from './useDragDropContext' | ||
|
||
import { MaybeElementRef, convertElement } from '@idux/cdk/utils' | ||
|
||
export const withDragHandle = (source: MaybeElementRef, handle: MaybeElementRef, context: DnDContext): void => { | ||
let dragTarget: HTMLElement | null = null | ||
const sourceEl = convertElement(source)! | ||
const handleEl = convertElement(handle)! | ||
|
||
handleEl.classList.add('cdk-draggable-handle') | ||
|
||
context.registry.on(sourceEl, 'source', 'pointerdown', e => { | ||
dragTarget = e.target as HTMLElement | ||
}) | ||
|
||
context.registry.on(sourceEl, 'source', 'pointerup', _ => { | ||
dragTarget = null | ||
}) | ||
|
||
context.registry.on(sourceEl, 'source', 'dragstart', e => { | ||
if (!handleEl.contains(dragTarget)) { | ||
e.preventDefault() | ||
} | ||
}) | ||
} |
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
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 |
---|---|---|
@@ -1,6 +1,6 @@ | ||
.cdk-draggable { | ||
|
||
&[draggable] { | ||
&-handle,&[draggable] { | ||
cursor: move; | ||
|
||
> * { | ||
|
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 @@ | ||
--- | ||
title: | ||
zh: 可拖拽的对话框 | ||
en: Quickly create | ||
order: 8 | ||
--- | ||
|
||
## zh | ||
|
||
启用`draggable`属性,以支持对话框的自由拖放 | ||
|
||
## en | ||
|
||
enable `draggable` attribute, support draggable dialog |
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 @@ | ||
<template> | ||
<IxButton mode="primary" @click="visible = !visible">Open modal</IxButton> | ||
<IxModal v-model:visible="visible" draggable header="This is header"> | ||
<p>Some contents...</p> | ||
<p>Some contents...</p> | ||
<p>Some contents...</p> | ||
</IxModal> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { ref } from 'vue' | ||
const visible = ref(false) | ||
</script> |
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
Oops, something went wrong.