diff --git a/404.html b/404.html index b786c7d3..c24db80a 100644 --- a/404.html +++ b/404.html @@ -14,7 +14,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home
- + \ No newline at end of file diff --git a/__docs__/index.html b/__docs__/index.html index 45c59913..868ec7fd 100644 --- a/__docs__/index.html +++ b/__docs__/index.html @@ -17,7 +17,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

VueDraggablePlus

支持 Vue2 和 Vue3 的拖拽组件

开始
演示
🎛

功能齐全

全面继承 Sortable.js 的所有功能

💡

无缝迁移

适用于 Vue 3 和 Vue2

🛠

灵活使用

支持组件、指令、函数式调用，总有一款是您喜欢的

🦾️

类型强

用 TypeScript 编写，带有完整的 TS 文档

🔌

双向绑定

支持 v-model 双向绑定

🎪

自定义容器

将指定容器作为拖拽容器

- + \ No newline at end of file diff --git a/api/index.html b/api/index.html index ef08fe3d..9fdc3940 100644 --- a/api/index.html +++ b/api/index.html @@ -173,7 +173,7 @@ touchEvt: TouchEvent, hoverTargetEl: HTMLElement, ) => 'continue' | void) | undefined;
参数说明类型默认值
animation拖动时显示动画Number0
chosenClass被选中项的 css 类名String'sortable-chosen'
delay选中拖拽延时Number0
delayOnTouchOnlytouch 事件延迟Number0
direction拖拽方向，默认自动判断。可选值有horizontal 和 verticalString-
disabled是否禁止拖拽Booleanfalse
dragClass拖拽项类名String'sortable-drag'
draggable指定元素内的哪些项目应该是可拖动的String-
emptyInsertThreshold拖动时鼠标必须与空可排序项的距离（以像素为单位）,以便将拖动元素插入到该可排序项中, 设置为0禁用此功能。Number5
easing简化动画。Easing-
fallbackClass当使用forceFallback的时候，被复制的dom的css类名Stringsortable-fallback
fallbackOnBody将cloned DOM 元素挂到body元素上。Booleanfalse
fallbackTolerance以像素为单位指定鼠标在被视为拖动之前应该移动多远。Number0
filter不需要进行拖动的元素String-
forceFallback忽略 HTML5拖拽行为，强制回退Booleanfalse
ghostClassdrop placeholder的css类名String'sortable-ghost'
group要将元素从一个列表拖到另一个列表中，两个列表必须具有相同的group 值。您还可以定义列表是否可以被移出、或者克隆以及接收其他列表元素。详情查阅上方TS类型定义Group-
handle设置可拖拽句柄的css类名，如果不设置，默认对目标元素的子列表操作进行拖拽String-
invertSwap如果设置为 true，将始终使用反向交换区Booleanfalse
invertedSwapThreshold反向交换阈值，默认情况下将设置为swapThreshold 值Number-
preventOnFilter触发filter时调用event.preventDefault()Booleantrue
removeCloneOnHide删除不显示的克隆元素，而不是仅仅隐藏它Booleantrue
sort定义列表单元是否可以在列表容器内进行拖拽排序Booleantrue
swapThreshold交换区的阈值Number1
touchStartThreshold在取消延迟拖动事件之前点应该移动多少像素Number1
setData传递一个函数，函数的第一个参数为DataTransfer类型，第二个参数为HTMLElement 类型Function
scroll是否启用滚动Boolean or HTMLElementtrue
scrollFn自定义滚动ScrollFn-
scrollSensitivity鼠标必须离边缘多近才能开始滚动，单位 pxNumber-
scrollSpeed滚动速度(ms/px)number-
bubbleScroll将自动滚动应用于所有父元素，以便更轻松地移动Booleantrue
onChoose元素被选中((event: SortableEvent) => void)-
onUnchoose元素取消选中((event: SortableEvent) => void)-
onStart元素开始拖拽((event: SortableEvent) => void)-
onEnd元素取消拖拽((event: SortableEvent) => void)-
onAdd元素从一个列表拖拽到另一个列表((event: SortableEvent) => void)-
onUpdate元素顺序更新时触发((event: SortableEvent) => void)-
onSort列表的任何更改都会触发((event: SortableEvent) => void)-
onRemove元素从列表中移除进入另一个列表((event: SortableEvent) => void)-
onFilter试图拖拽一个filtered的元素((event: SortableEvent) => void)-
onMove拖拽移动的时候触发((event: MoveEvent,originalEvent: Event) => void)-
onClone克隆一个元素时触发((event: SortableEvent) => void)-
onChange拖拽元素改变位置时触发((event: SortableEvent) => void)-
- + \ No newline at end of file diff --git a/contact-me/index.html b/contact-me/index.html index 7cfe8862..53c4a819 100644 --- a/contact-me/index.html +++ b/contact-me/index.html @@ -18,7 +18,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

联系我 ​

如果您在使用过程中遇到问题，可以通过扫描一下二维码加入微信群或者添加我的微信，我会第一时间为您解答，不仅限于 vue-draggable-plus 的问题，其他问题也可以一起交流。

如微信群二维码失效，请添加我的微信，我会拉您进群。

- + \ No newline at end of file diff --git a/demo/basic/index.html b/demo/basic/index.html index 11070138..c58fcc3a 100644 --- a/demo/basic/index.html +++ b/demo/basic/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

基础使用 ​

单个列表拖拽排序，双向绑定数据。

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/demo/clone/index.html b/demo/clone/index.html index 6132e8c1..24700ded 100644 --- a/demo/clone/index.html +++ b/demo/clone/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

拖拽克隆 ​

从一个列表中拖拽克隆到另一个列表，可以通过 clone 属性来开启它，内部默认使用 JSON.parse(JSON.stringify()) 来实现克隆，如果您需要传递自定义函数，请使用 clone 属性传递函数，使用方式自定义克隆。

我们在使用该功能时，需要注意：

  1. 被克隆组件的 group 属性中的 pull 属性必须为 clone，否则无法克隆。
  2. 被克隆组件中的 group 中的 name 属性必须与克隆组件的 group 中的 name 属性一致，否则无法克隆。

TIP

注意：当我们使用 clone 属性时，需要重新生成一个唯一的 key，否则会导致组件渲染异常。

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/demo/custom-clone/index.html b/demo/custom-clone/index.html index 0be6f5ff..4c2d5460 100644 --- a/demo/custom-clone/index.html +++ b/demo/custom-clone/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

自定义克隆 ​

我们可以通过 clone 属性传递一个函数，来自定义克隆的节点，内部使用 JSON.parse(JSON.stringify())实现克隆，您也可以选择使用 lodash 或者其他第三方库的方式进行克隆，此功能常用与低代码场景，比如拖拽表单元素到画布中，需要克隆一个新的组件元素。

我们在使用该功能时，需要注意：

  1. 被克隆组件的 group 属性中的 pull 属性必须为 clone，否则无法克隆。
  2. 被克隆组件中的 group 中的 name 属性必须与克隆组件的 group 中的 name 属性一致，否则无法克隆。

TIP

注意：当我们使用 clone 属性时，需要重新生成一个唯一的 key，否则会导致组件渲染异常。

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/demo/handle/index.html b/demo/handle/index.html index 8a155867..fd07f065 100644 --- a/demo/handle/index.html +++ b/demo/handle/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

使用句柄操作 ​

我们可以通过 handle 属性传递一个选择器，来指定拖拽的句柄。

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/demo/nested/index.html b/demo/nested/index.html index f1a08a50..2a1a73a4 100644 --- a/demo/nested/index.html +++ b/demo/nested/index.html @@ -250,7 +250,7 @@ outline: 1px dashed; } </style> - + \ No newline at end of file diff --git a/demo/table-column/index.html b/demo/table-column/index.html index 39d87ebf..5f15a919 100644 --- a/demo/table-column/index.html +++ b/demo/table-column/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

表格列拖拽 ​

我们将表格的 thead 指定为目标容器，实现表格拖拽

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/demo/table/index.html b/demo/table/index.html index b9e80933..405d6ff8 100644 --- a/demo/table/index.html +++ b/demo/table/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

Table ​

我们将表格的 tbody 指定为目标容器，实现表格拖拽

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/demo/target-container/index.html b/demo/target-container/index.html index 74fb95b4..a5028e25 100644 --- a/demo/target-container/index.html +++ b/demo/target-container/index.html @@ -97,7 +97,7 @@ </div> </div> </template> - + \ No newline at end of file diff --git a/demo/tow-list/index.html b/demo/tow-list/index.html index 2652d7d9..cee58041 100644 --- a/demo/tow-list/index.html +++ b/demo/tow-list/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

双列表拖拽排序 ​

多列表之间拖拽排序，双向绑定数据。

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/demo/transition/index.html b/demo/transition/index.html index 650bf86c..2f43ba4f 100644 --- a/demo/transition/index.html +++ b/demo/transition/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

Transition ​

我们可以使用 transition 组件来实现过渡动画。

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/demo/transitions/index.html b/demo/transitions/index.html index 48052a6a..f542eaf2 100644 --- a/demo/transitions/index.html +++ b/demo/transitions/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

混合动画 ​

我们可以在拖拽排序时使用 animation 属性实现过渡，还原时使用 transition 属性实现过渡。

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/en/api/index.html b/en/api/index.html index aa2a5448..03b27d6f 100644 --- a/en/api/index.html +++ b/en/api/index.html @@ -173,7 +173,7 @@ touchEvt: TouchEvent, hoverTargetEl: HTMLElement, ) => 'continue' | void) | undefined;

API ​

ParameterDescriptionTypeDefault
animationShow animation while draggingNumber0
chosenClassCSS class name for chosen itemString'sortable-chosen'
delayDelay in milliseconds before drag startsNumber0
delayOnTouchOnlyDelay on touch eventNumber0
directionDragging direction, vertical or horizontal (default auto detect)String-
disabledDisable draggingBooleanfalse
dragClassCSS class name for dragged itemString'sortable-drag'
draggableSelector for draggable items within elementString-
emptyInsertThresholdDistance (in pixels) from empty sortable items where dragging element should be inserted. Set to 0 to disable this feature.Number5
easingAnimation easingEasing-
fallbackClassCSS class name for cloned DOM elements when using forceFallbackStringsortable-fallback
fallbackOnBodyAppend cloned DOM element to body elementBooleanfalse
fallbackTolerancePixels mouse must move before drag start when using forceFallbackNumber0
filterSelector for items that should not be draggableString-
forceFallbackIgnore HTML5 drag and drop behavior and force fallbackBooleanfalse
ghostClassCSS class name for drop placeholderString'sortable-ghost'
groupGroup items to drag between sortable lists. Both lists must have the same group value. Also define whether lists can be dragged out of, cloned, or receive elements from other lists. See TypeScript type definition above for details.Group-
handleSelector for handle to initiate drag. If not set, the target element's children are usedString-
invertSwapAlways use inverted swap zone if set to trueBooleanfalse
invertedSwapThresholdInverted swap zone threshold, defaults to swapThreshold valueNumber-
preventOnFilterCall event.preventDefault() on filter eventBooleantrue
removeCloneOnHideRemove instead of hiding cloned element when not displayedBooleantrue
sortAllow list items to be sorted within containerBooleantrue
swapThresholdSwap zone thresholdNumber1
touchStartThresholdPixels before cancelling delay touch eventNumber1
setDataPass a function where the first argument is of type DataTransfer and the second argument is of type HTMLElementFunction-
scrollEnable scrollingBooleanHTMLElement
scrollFnCustom scroll functionScrollFn-
scrollSensitivityThe distance in pixels the mouse must be to the edge to start scrollingNumber-
scrollSpeedThe scrolling speed in ms/pxnumber-
bubbleScrollEnables automatic scrolling for all parent elements to make it easier to move itemsBooleantrue
onChooseTriggered when an item is selected((event: SortableEvent) => void)-
onUnchooseTriggered when an item is deselected((event: SortableEvent) => void)-
onStartTriggered when an item is picked up for drag and drop((event: SortableEvent) => void)-
onEndTriggered when an item is no longer being dragged((event: SortableEvent) => void)-
onAddTriggered when an item is moved from one list to another((event: SortableEvent) => void)-
onUpdateTriggered when the order of the items is updated((event: SortableEvent) => void)-
onSortTriggered whenever any changes are made to the list((event: SortableEvent) => void)-
onRemoveTriggered when an item is removed from the list and moved to another((event: SortableEvent) => void)-
onFilterTriggered when trying to drag a filtered item((event: SortableEvent) => void)-
onMoveTriggered while an item is being dragged((event: MoveEvent,originalEvent: Event) => void)-
onCloneTriggered when an item is cloned((event: SortableEvent) => void)-
onChangeTriggered when an item is dragged and changes position((event: SortableEvent) => void)-
- + \ No newline at end of file diff --git a/en/demo/basic/index.html b/en/demo/basic/index.html index 0c1a9d8d..2a19d33b 100644 --- a/en/demo/basic/index.html +++ b/en/demo/basic/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

English

简体中文

English

简体中文

Appearance

On this page

Basic Usage ​

Single list drag and drop sorting, two way data binding.

Component Usage ​

Function Usage ​

Directive Usage ​

- + \ No newline at end of file diff --git a/en/demo/clone/index.html b/en/demo/clone/index.html index 979864ca..cb10632e 100644 --- a/en/demo/clone/index.html +++ b/en/demo/clone/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

English

简体中文

English

简体中文

Appearance

On this page

Drag Clone ​

Drag and drop from one list to another list, you can use the clone attribute to enable it, internally use JSON.parse(JSON.stringify()) to achieve cloning by default, if you need to pass a custom function, please Use the clone attribute to pass the function, and use the method to customize the clone.

When we use this function, we need to pay attention to：

  1. The pull attribute in the group attribute of the cloned component must be clone, otherwise it cannot be cloned.
  2. The name attribute in the group of the cloned component must be consistent with the name attribute in the group of the cloned component, otherwise it cannot be cloned.

TIP

Note: When we use the clone attribute, we need to regenerate a unique key, otherwise it will cause the component to render abnormally.

Component Usage ​

Function Usage ​

Directive Usage ​

- + \ No newline at end of file diff --git a/en/demo/custom-clone/index.html b/en/demo/custom-clone/index.html index 4617ce41..06c33441 100644 --- a/en/demo/custom-clone/index.html +++ b/en/demo/custom-clone/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

English

简体中文

English

简体中文

Appearance

On this page

Custom Clone ​

We can pass a function through the clone attribute to customize the cloned node, and JSON.parse(JSON.stringify()) is used internally to implement cloning. You can also choose to use lodash or other third-party libraries. Clone, this function is commonly used in low-code scenarios, such as dragging form elements to the canvas, and a new component element needs to be cloned.

When we use this function, we need to pay attention to：

  1. The pull attribute in the group attribute of the cloned component must be clone, otherwise it cannot be cloned.
  2. The name attribute in the group of the cloned component must be consistent with the name attribute in the group of the cloned component, otherwise it cannot be cloned.

TIP

Note: When we use the clone attribute, we need to regenerate a unique key, otherwise it will cause the component to render abnormally.

Component Usage ​

Function Usage ​

Directive Usage ​

- + \ No newline at end of file diff --git a/en/demo/handle/index.html b/en/demo/handle/index.html index d4e7ae4c..dc1d0017 100644 --- a/en/demo/handle/index.html +++ b/en/demo/handle/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

English

简体中文

English

简体中文

Appearance

On this page

Handle ​

We can pass a selector through the handle attribute to specify the drag handle.

Component Usage ​

Function Usage ​

Directive Usage ​

- + \ No newline at end of file diff --git a/en/demo/nested/index.html b/en/demo/nested/index.html index 352f96f5..e09a1121 100644 --- a/en/demo/nested/index.html +++ b/en/demo/nested/index.html @@ -250,7 +250,7 @@ outline: 1px dashed; } </style> - + \ No newline at end of file diff --git a/en/demo/table-column/index.html b/en/demo/table-column/index.html index 8895a619..1782e065 100644 --- a/en/demo/table-column/index.html +++ b/en/demo/table-column/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

English

简体中文

English

简体中文

Appearance

On this page

Table Column ​

We specify the thead of the table as the target container to implement table column drag and drop

Component Usage ​

Function Usage ​

Directive Usage ​

- + \ No newline at end of file diff --git a/en/demo/table/index.html b/en/demo/table/index.html index 930ae0a6..3fb43653 100644 --- a/en/demo/table/index.html +++ b/en/demo/table/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

English

简体中文

English

简体中文

Appearance

On this page

Table ​

We specify the tbody of the table as the target container to implement table row dragging

Component Usage ​

Function Usage ​

Directive Usage ​

- + \ No newline at end of file diff --git a/en/demo/target-container/index.html b/en/demo/target-container/index.html index f7cd554a..c1ddb287 100644 --- a/en/demo/target-container/index.html +++ b/en/demo/target-container/index.html @@ -97,7 +97,7 @@ </div> </div> </template> - + \ No newline at end of file diff --git a/en/demo/tow-list/index.html b/en/demo/tow-list/index.html index 40511b5b..0e8ab590 100644 --- a/en/demo/tow-list/index.html +++ b/en/demo/tow-list/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

English

简体中文

English

简体中文

Appearance

On this page

Double list drag and drop sorting ​

Drag and drop sorting between multiple lists, two-way data binding.

Component Usage ​

Function Usage ​

Directive Usage ​

- + \ No newline at end of file diff --git a/en/demo/transition/index.html b/en/demo/transition/index.html index a8e3d6a4..b0c7048f 100644 --- a/en/demo/transition/index.html +++ b/en/demo/transition/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

English

简体中文

English

简体中文

Appearance

On this page

Transition ​

We can use the transition component to implement transition animations.

Component Usage ​

Function Usage ​

Directive Usage ​

- + \ No newline at end of file diff --git a/en/demo/transitions/index.html b/en/demo/transitions/index.html index af60b79c..de1b3d57 100644 --- a/en/demo/transitions/index.html +++ b/en/demo/transitions/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

English

简体中文

English

简体中文

Appearance

On this page

Mixin Animation ​

We can use the animation attribute to implement the transition when dragging and sorting, and use the transition attribute to implement the transition when restoring.

Component Usage ​

Function Usage ​

Directive Usage ​

- + \ No newline at end of file diff --git a/en/faq/index.html b/en/faq/index.html index afcd314b..d8431de2 100644 --- a/en/faq/index.html +++ b/en/faq/index.html @@ -17,7 +17,7 @@
vue-draggable-plus

English

简体中文

English

简体中文

Appearance

On this page

FAQ ​

Why is the order not updating correctly when I sort? ​

Answer: Please ensure that when using v-for to render a list, the bound key values are unique to avoid rendering errors. Avoid using the index as the key value.

- + \ No newline at end of file diff --git a/en/guide/index.html b/en/guide/index.html index 0c25d533..59cbf9fa 100644 --- a/en/guide/index.html +++ b/en/guide/index.html @@ -263,7 +263,7 @@ console.log('update') } </script> - + \ No newline at end of file diff --git a/en/index.html b/en/index.html index 4a932ab6..f44ca122 100644 --- a/en/index.html +++ b/en/index.html @@ -17,7 +17,7 @@
vue-draggable-plus

English

简体中文

English

简体中文

Appearance

VueDraggablePlus

Drag and drop components that support Vue2 and Vue3

Guide
Demo
🎛

Full function

All the features of Sortable.js

💡

Seamless migration

Suitable for Vue 3 and Vue2

🛠

Flexible use

Support component, directive, functional call, there is always one that you like

🦾️

Strong type

Written in TypeScript, with complete TS documentation

🔌

Two-way binding

Support v-model two-way binding

🎪

Custom container

Specify the container as the drag container

- + \ No newline at end of file diff --git a/faq/index.html b/faq/index.html index f78e246b..4455a124 100644 --- a/faq/index.html +++ b/faq/index.html @@ -17,7 +17,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

常见问题 ​

为什么我在排序时，更新顺序错误？ ​

答：请确保在使用 v-for 渲染列表时，绑定的 key 值是唯一的，否则会导致渲染错误。避免使用 index 作为 key 值。

- + \ No newline at end of file diff --git a/group.jpg b/group.jpg index bac9a96c..baeba472 100644 Binary files a/group.jpg and b/group.jpg differ diff --git a/guide/index.html b/guide/index.html index b2847060..463d20d9 100644 --- a/guide/index.html +++ b/guide/index.html @@ -263,7 +263,7 @@ console.log('update') } </script> - + \ No newline at end of file diff --git a/hashmap.json b/hashmap.json index d60bacf5..c8ca441b 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"contact-me_index.md":"6add92b7","docs___index.md":"08f9b639","api_index.md":"668da866","demo_basic_index.md":"771726b2","demo_table_index.md":"8b4e21f2","en_api_index.md":"3d9b7cda","demo_target-container_index.md":"60a76283","demo_nested_index.md":"8ae8845f","en_demo_basic_index.md":"7c6e8595","demo_table-column_index.md":"e98ffdf7","index.md":"8413ef5f","demo_handle_index.md":"5b2a60a1","root_api_index.md":"394bac40","root___docs___index.md":"080bf399","faq_index.md":"f61132ea","demo_transition_index.md":"1f75dd0d","en_demo_table-column_index.md":"18d62879","en_demo_nested_index.md":"2948ed85","en_demo_handle_index.md":"c7ba2f9b","en_demo_table_index.md":"dbe505b5","en_demo_transition_index.md":"497646d3","demo_transitions_index.md":"59e71d8d","en_demo_transitions_index.md":"62e93641","en_demo_tow-list_index.md":"972beb34","en_demo_target-container_index.md":"39611571","root_contact-me_index.md":"f8c65e93","root_demo_table_index.md":"0b3aba26","root_demo_handle_index.md":"d28ffb76","root_demo_clone_index.md":"ffd22b23","root_demo_table-column_index.md":"d4af5b9d","root_faq_index.md":"55114612","root_guide_index.md":"a18c117f","en_faq_index.md":"3859b70f","en_guide_index.md":"39a24dfd","root_demo_transition_index.md":"7378fd5e","en_index.md":"f68900c7","demo_clone_index.md":"c5a47960","root_demo_transitions_index.md":"9cfe88ef","en_demo_clone_index.md":"08b15aa5","demo_custom-clone_index.md":"7fb20f40","guide_index.md":"91156063","demo_tow-list_index.md":"f2ecae88","root_demo_target-container_index.md":"7a20df4e","root_demo_basic_index.md":"3097ec4a","root_demo_nested_index.md":"2907c229","root_demo_custom-clone_index.md":"d85f9542","en_demo_custom-clone_index.md":"fbe90294","root_index.md":"73899b63","root_demo_tow-list_index.md":"0ce8fbf1"} +{"en_demo_table-column_index.md":"18d62879","en_demo_nested_index.md":"2948ed85","contact-me_index.md":"6add92b7","demo_tow-list_index.md":"f2ecae88","demo_basic_index.md":"771726b2","en_demo_tow-list_index.md":"972beb34","en_demo_clone_index.md":"08b15aa5","en_api_index.md":"3d9b7cda","en_demo_handle_index.md":"c7ba2f9b","en_demo_table_index.md":"dbe505b5","en_faq_index.md":"3859b70f","en_demo_custom-clone_index.md":"fbe90294","en_guide_index.md":"39a24dfd","demo_transition_index.md":"1f75dd0d","faq_index.md":"f61132ea","en_index.md":"f68900c7","index.md":"8413ef5f","demo_transitions_index.md":"59e71d8d","root___docs___index.md":"080bf399","root_contact-me_index.md":"f8c65e93","root_api_index.md":"394bac40","en_demo_transition_index.md":"497646d3","root_demo_basic_index.md":"3097ec4a","demo_clone_index.md":"c5a47960","api_index.md":"668da866","demo_table-column_index.md":"e98ffdf7","docs___index.md":"08f9b639","en_demo_basic_index.md":"7c6e8595","en_demo_target-container_index.md":"39611571","demo_custom-clone_index.md":"7fb20f40","demo_target-container_index.md":"60a76283","root_demo_clone_index.md":"ffd22b23","root_demo_custom-clone_index.md":"d85f9542","demo_table_index.md":"8b4e21f2","demo_nested_index.md":"8ae8845f","root_demo_target-container_index.md":"7a20df4e","root_index.md":"73899b63","root_faq_index.md":"55114612","en_demo_transitions_index.md":"62e93641","root_demo_table_index.md":"0b3aba26","root_guide_index.md":"a18c117f","root_demo_table-column_index.md":"d4af5b9d","root_demo_transitions_index.md":"9cfe88ef","demo_handle_index.md":"5b2a60a1","guide_index.md":"91156063","root_demo_transition_index.md":"7378fd5e","root_demo_nested_index.md":"2907c229","root_demo_handle_index.md":"d28ffb76","root_demo_tow-list_index.md":"0ce8fbf1"} diff --git a/index.html b/index.html index 64a62325..b60c2919 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

VueDraggablePlus

支持 Vue2 和 Vue3 的拖拽组件

开始
演示
🎛

功能齐全

全面继承 Sortable.js 的所有功能

💡

无缝迁移

适用于 Vue 3 和 Vue2

🛠

灵活使用

支持组件、指令、函数式调用，总有一款是您喜欢的

🦾️

类型强

用 TypeScript 编写，带有完整的 TS 文档

🔌

双向绑定

支持 v-model 双向绑定

🎪

自定义容器

将指定容器作为拖拽容器

- + \ No newline at end of file diff --git a/root/__docs__/index.html b/root/__docs__/index.html index 087992af..e44b706f 100644 --- a/root/__docs__/index.html +++ b/root/__docs__/index.html @@ -17,7 +17,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

VueDraggablePlus

支持 Vue2 和 Vue3 的拖拽组件

开始
演示
🎛

功能齐全

全面继承 Sortable.js 的所有功能

💡

无缝迁移

适用于 Vue 3 和 Vue2

🛠

灵活使用

支持组件、指令、函数式调用，总有一款是您喜欢的

🦾️

类型强

用 TypeScript 编写，带有完整的 TS 文档

🔌

双向绑定

支持 v-model 双向绑定

🎪

自定义容器

将指定容器作为拖拽容器

- + \ No newline at end of file diff --git a/root/api/index.html b/root/api/index.html index 55c5f85b..7598109f 100644 --- a/root/api/index.html +++ b/root/api/index.html @@ -173,7 +173,7 @@ touchEvt: TouchEvent, hoverTargetEl: HTMLElement, ) => 'continue' | void) | undefined;
参数说明类型默认值
animation拖动时显示动画Number0
chosenClass被选中项的 css 类名String'sortable-chosen'
delay选中拖拽延时Number0
delayOnTouchOnlytouch 事件延迟Number0
direction拖拽方向，默认自动判断。可选值有horizontal 和 verticalString-
disabled是否禁止拖拽Booleanfalse
dragClass拖拽项类名String'sortable-drag'
draggable指定元素内的哪些项目应该是可拖动的String-
emptyInsertThreshold拖动时鼠标必须与空可排序项的距离（以像素为单位）,以便将拖动元素插入到该可排序项中, 设置为0禁用此功能。Number5
easing简化动画。Easing-
fallbackClass当使用forceFallback的时候，被复制的dom的css类名Stringsortable-fallback
fallbackOnBody将cloned DOM 元素挂到body元素上。Booleanfalse
fallbackTolerance以像素为单位指定鼠标在被视为拖动之前应该移动多远。Number0
filter不需要进行拖动的元素String-
forceFallback忽略 HTML5拖拽行为，强制回退Booleanfalse
ghostClassdrop placeholder的css类名String'sortable-ghost'
group要将元素从一个列表拖到另一个列表中，两个列表必须具有相同的group 值。您还可以定义列表是否可以被移出、或者克隆以及接收其他列表元素。详情查阅上方TS类型定义Group-
handle设置可拖拽句柄的css类名，如果不设置，默认对目标元素的子列表操作进行拖拽String-
invertSwap如果设置为 true，将始终使用反向交换区Booleanfalse
invertedSwapThreshold反向交换阈值，默认情况下将设置为swapThreshold 值Number-
preventOnFilter触发filter时调用event.preventDefault()Booleantrue
removeCloneOnHide删除不显示的克隆元素，而不是仅仅隐藏它Booleantrue
sort定义列表单元是否可以在列表容器内进行拖拽排序Booleantrue
swapThreshold交换区的阈值Number1
touchStartThreshold在取消延迟拖动事件之前点应该移动多少像素Number1
setData传递一个函数，函数的第一个参数为DataTransfer类型，第二个参数为HTMLElement 类型Function
scroll是否启用滚动Boolean or HTMLElementtrue
scrollFn自定义滚动ScrollFn-
scrollSensitivity鼠标必须离边缘多近才能开始滚动，单位 pxNumber-
scrollSpeed滚动速度(ms/px)number-
bubbleScroll将自动滚动应用于所有父元素，以便更轻松地移动Booleantrue
onChoose元素被选中((event: SortableEvent) => void)-
onUnchoose元素取消选中((event: SortableEvent) => void)-
onStart元素开始拖拽((event: SortableEvent) => void)-
onEnd元素取消拖拽((event: SortableEvent) => void)-
onAdd元素从一个列表拖拽到另一个列表((event: SortableEvent) => void)-
onUpdate元素顺序更新时触发((event: SortableEvent) => void)-
onSort列表的任何更改都会触发((event: SortableEvent) => void)-
onRemove元素从列表中移除进入另一个列表((event: SortableEvent) => void)-
onFilter试图拖拽一个filtered的元素((event: SortableEvent) => void)-
onMove拖拽移动的时候触发((event: MoveEvent,originalEvent: Event) => void)-
onClone克隆一个元素时触发((event: SortableEvent) => void)-
onChange拖拽元素改变位置时触发((event: SortableEvent) => void)-
- + \ No newline at end of file diff --git a/root/contact-me/index.html b/root/contact-me/index.html index 57c2aef1..c4e5c197 100644 --- a/root/contact-me/index.html +++ b/root/contact-me/index.html @@ -18,7 +18,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

联系我 ​

如果您在使用过程中遇到问题，可以通过扫描一下二维码加入微信群或者添加我的微信，我会第一时间为您解答，不仅限于 vue-draggable-plus 的问题，其他问题也可以一起交流。

如微信群二维码失效，请添加我的微信，我会拉您进群。

- + \ No newline at end of file diff --git a/root/demo/basic/index.html b/root/demo/basic/index.html index 7fb155b8..2650fb2d 100644 --- a/root/demo/basic/index.html +++ b/root/demo/basic/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

基础使用 ​

单个列表拖拽排序，双向绑定数据。

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/root/demo/clone/index.html b/root/demo/clone/index.html index 2887a6c6..790f2d25 100644 --- a/root/demo/clone/index.html +++ b/root/demo/clone/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

拖拽克隆 ​

从一个列表中拖拽克隆到另一个列表，可以通过 clone 属性来开启它，内部默认使用 JSON.parse(JSON.stringify()) 来实现克隆，如果您需要传递自定义函数，请使用 clone 属性传递函数，使用方式自定义克隆。

我们在使用该功能时，需要注意：

  1. 被克隆组件的 group 属性中的 pull 属性必须为 clone，否则无法克隆。
  2. 被克隆组件中的 group 中的 name 属性必须与克隆组件的 group 中的 name 属性一致，否则无法克隆。

TIP

注意：当我们使用 clone 属性时，需要重新生成一个唯一的 key，否则会导致组件渲染异常。

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/root/demo/custom-clone/index.html b/root/demo/custom-clone/index.html index 9f7a2edd..f78750cd 100644 --- a/root/demo/custom-clone/index.html +++ b/root/demo/custom-clone/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

自定义克隆 ​

我们可以通过 clone 属性传递一个函数，来自定义克隆的节点，内部使用 JSON.parse(JSON.stringify())实现克隆，您也可以选择使用 lodash 或者其他第三方库的方式进行克隆，此功能常用与低代码场景，比如拖拽表单元素到画布中，需要克隆一个新的组件元素。

我们在使用该功能时，需要注意：

  1. 被克隆组件的 group 属性中的 pull 属性必须为 clone，否则无法克隆。
  2. 被克隆组件中的 group 中的 name 属性必须与克隆组件的 group 中的 name 属性一致，否则无法克隆。

TIP

注意：当我们使用 clone 属性时，需要重新生成一个唯一的 key，否则会导致组件渲染异常。

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/root/demo/handle/index.html b/root/demo/handle/index.html index 7a8f86c5..d966a2fc 100644 --- a/root/demo/handle/index.html +++ b/root/demo/handle/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

使用句柄操作 ​

我们可以通过 handle 属性传递一个选择器，来指定拖拽的句柄。

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/root/demo/nested/index.html b/root/demo/nested/index.html index 7d3bcaa4..465e6391 100644 --- a/root/demo/nested/index.html +++ b/root/demo/nested/index.html @@ -250,7 +250,7 @@ outline: 1px dashed; } </style> - + \ No newline at end of file diff --git a/root/demo/table-column/index.html b/root/demo/table-column/index.html index 1ebf2daa..ca083ec9 100644 --- a/root/demo/table-column/index.html +++ b/root/demo/table-column/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

表格列拖拽 ​

我们将表格的 thead 指定为目标容器，实现表格拖拽

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/root/demo/table/index.html b/root/demo/table/index.html index bfc77c2d..ace50f92 100644 --- a/root/demo/table/index.html +++ b/root/demo/table/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

Table ​

我们将表格的 tbody 指定为目标容器，实现表格拖拽

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/root/demo/target-container/index.html b/root/demo/target-container/index.html index fd84a70e..902c665a 100644 --- a/root/demo/target-container/index.html +++ b/root/demo/target-container/index.html @@ -97,7 +97,7 @@ </div> </div> </template> - + \ No newline at end of file diff --git a/root/demo/tow-list/index.html b/root/demo/tow-list/index.html index 51e4a0a1..d4be8e4e 100644 --- a/root/demo/tow-list/index.html +++ b/root/demo/tow-list/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

双列表拖拽排序 ​

多列表之间拖拽排序，双向绑定数据。

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/root/demo/transition/index.html b/root/demo/transition/index.html index 6cf2aa83..0c38e51c 100644 --- a/root/demo/transition/index.html +++ b/root/demo/transition/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

Transition ​

我们可以使用 transition 组件来实现过渡动画。

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/root/demo/transitions/index.html b/root/demo/transitions/index.html index 958f3ce4..a8b0a56c 100644 --- a/root/demo/transitions/index.html +++ b/root/demo/transitions/index.html @@ -20,7 +20,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

混合动画 ​

我们可以在拖拽排序时使用 animation 属性实现过渡，还原时使用 transition 属性实现过渡。

组件使用 ​

函数使用 ​

指令使用 ​

- + \ No newline at end of file diff --git a/root/faq/index.html b/root/faq/index.html index ff11b2eb..2ffd87cb 100644 --- a/root/faq/index.html +++ b/root/faq/index.html @@ -17,7 +17,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

On this page

常见问题 ​

为什么我在排序时，更新顺序错误？ ​

答：请确保在使用 v-for 渲染列表时，绑定的 key 值是唯一的，否则会导致渲染错误。避免使用 index 作为 key 值。

- + \ No newline at end of file diff --git a/root/guide/index.html b/root/guide/index.html index 5fab3403..305b4f24 100644 --- a/root/guide/index.html +++ b/root/guide/index.html @@ -263,7 +263,7 @@ console.log('update') } </script> - + \ No newline at end of file diff --git a/root/index.html b/root/index.html index 1faeaaa6..7839ff39 100644 --- a/root/index.html +++ b/root/index.html @@ -17,7 +17,7 @@
vue-draggable-plus

简体中文

English

简体中文

English

Appearance

VueDraggablePlus

支持 Vue2 和 Vue3 的拖拽组件

开始
演示
🎛

功能齐全

全面继承 Sortable.js 的所有功能

💡

无缝迁移

适用于 Vue 3 和 Vue2

🛠

灵活使用

支持组件、指令、函数式调用，总有一款是您喜欢的

🦾️

类型强

用 TypeScript 编写，带有完整的 TS 文档

🔌

双向绑定

支持 v-model 双向绑定

🎪

自定义容器

将指定容器作为拖拽容器

- + \ No newline at end of file