vuedraggable_readme雙語翻譯

<img width="140" src="https://oscimg.oschina.net/oscnet/logo.svg"> <h1 align="center">Vue.Draggable</h1>

Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array.

Based on and offering all features of Sortable.js

[譯]Vue組件（Vue.js 2.0）或directive（Vue.js 1.0）允許拖放以及與視圖模型數組同步。

基於並提供Sortable.js的所有功能

Demo

Live Demos

https://sortablejs.github.io/Vue.Draggable/

https://david-desmaisons.github.io/draggable-example/

Features

Full support of Sortable.js features:
- Supports touch devices
- Supports drag handles and selectable text
- Smart auto-scrolling
- Support drag and drop between different lists
- No jQuery dependency
Keeps in sync HTML and view model list
Compatible with Vue.js 2.0 transition-group
Cancellation support
Events reporting any changes when full control is needed
Reuse existing UI library components (such as vuetify, element, or vue material etc...) and make them draggable using tag and componentData props
[譯]全面支持Sortable.js功能：
- 支持觸摸設備
- 支持拖動手柄和可選文本
- 智能自動滾動
- 支持在不同列表之間拖放
- 沒有jQuery依賴
與HTML和查看模型列表保持同步
與Vue.js 2.0過渡組兼容
支持取消
需要完全控制時,事件報告任何更改
重用現有的UI庫組件（例如vuetify, element, 或 vue material等），並使用tag和componentDataprops使其可拖動

Backers

Admin Dashboard Templates made with Vue, React and Angular.

Donate

Find this project useful? You can buy me a :coffee: or a :beer:

Installation

With npm or yarn

yarn add vuedraggable

npm i -S vuedraggable

Beware it is vuedraggable for Vue 2.0 and not vue-draggable which is for version 1.0

[譯]請注意，對於Vue 2.0是vuedraggable，對於Vue 1.0則是vue-draggable

with direct link


<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

cf example section

For Vue.js 2.0

Use draggable component:

Typical use:

<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

.vue file:

  import draggable from 'vuedraggable'
  ...
  export default {
        components: {
            draggable,
        },
  ...

With `transition-group`:

<draggable v-model="myArray">
    <transition-group>
        <div v-for="element in myArray" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>

Draggable component should directly wrap the draggable elements, or a transition-component containing the draggable elements.

[譯]可拖動組件應直接包裝可拖動元素，或包含可拖動元素的transition-component。

With footer slot:

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>

With header slot:

<draggable v-model="myArray" draggable=".item'">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="header" @click="addPeople">Add</button>
</draggable>

With Vuex:

<draggable v-model="myList">

computed: {
    myList: {
        get() {
            return this.$store.state.myList
        },
        set(value) {
            this.$store.commit('updateList', value)
        }
    }
}

Props

value

Type: Array Required: false Default: null

Input array to draggable component. Typically same array as referenced by inner element v-for directive. This is the preferred way to use Vue.draggable as it is compatible with Vuex. It should not be used directly but only though the v-model directive:

[譯]輸入數組到可拖動組件。通常與內部元素v-for指令引用的數組相同。 這是使用Vue.draggable的首選方式，因爲它與Vuex兼容。 它不應直接使用，而只能通過v-model指令使用：

<draggable v-model="myArray">

list

Type: Array Required: false Default: null

Alternative to the value prop, list is an array to be synchronized with drag-and-drop. The main difference is that list prop is updated by draggable component using splice method, whereas value is immutable. Do not use in conjunction with value prop.

[譯]list是valueprop的替代項，它是一個與拖放同步的數組。 主要區別在於listprop是通過可拖動組件使用拼接方法更新的，而value是不可變的。 不要與valueprop一起使用。

All sortable options

New in version 2.19

Sortable options can be set directly as vue.draggable props since version 2.19.

This means that all sortable option are valid sortable props with the notable exception of all the method starting by "on" as draggable component expose the same API via events.

kebab-case propery are supported: for example ghost-class props will be converted to ghostClass sortable option.

Example setting handle, sortable and a group option:

[譯]從2.19版開始，可以將sortable options直接設置爲vue.draggable的props。

這意味着所有sortable option都是有效的可排序props，除了所有以"on"開頭的情況明顯例外的方法，因爲可拖動組件通過事件公開了相同的API。

支持kebab-case屬性：例如，ghost-class將轉換爲ghostClass可排序選項。

設置句柄(handle)，可排序(sortable)和組選項(group option)的示例：

<draggable v-model="list" handle=".handle" :group="{ name: 'people', pull: 'clone', put: false }" ghost-class="ghost" :sort="false" @change="log">
      <!-- -->
</draggable>

tag

Type: String Default: 'div'

HTML node type of the element that draggable component create as outer element for the included slot. It is also possible to pass the name of vue component as element. In this case, draggable attribute will be passed to the create component. See also componentData if you need to set props or event to the created component.

[譯]可拖動組件將其創建爲所包含插槽的外部元素的元素的HTML節點類型。 也可以將vue組件的名稱作爲元素傳遞。在這種情況下，可拖動屬性將被傳遞用以創建組件。 如果需要爲創建的組件設置props或event，請參見componentData。

clone

Type: Function Required: false Default: (original) => { return original;}

Function called on the source component to clone element when clone option is true. The unique argument is the viewModel element to be cloned and the returned value is its cloned version. By default vue.draggable reuses the viewModel element, so you have to use this hook if you want to clone or deep clone it.

[譯]當clone選項爲true時，在源組件上調用的用於克隆元素的函數。唯一參數是要克隆的viewModel元素，返回值是其克隆版本。 默認情況下，vue.draggable重用viewModel元素，因此如果要克隆或深度克隆它，則必須使用此鉤子(hook)。

move

Type: Function Required: false Default: null

If not null this function will be called in a similar way as Sortable onMove callback. Returning false will cancel the drag operation.

[譯]如果不爲null，則將以與Sortable onMove callback回調類似的方式調用此函數。返回false將取消拖動操作。

function onMoveCallback(evt, originalEvent){
   ...
    // return false; — for cancel
}

evt object has same property as Sortable onMove event, and 3 additional properties:

draggedContext: context linked to dragged element
- index: dragged element index
- element: dragged element underlying view model element
- futureIndex: potential index of the dragged element if the drop operation is accepted
relatedContext: context linked to current drag operation
- index: target element index
- element: target element view model element
- list: target list
- component: target VueComponent

[譯]evt對象具有與Sortable onMove event相同的屬性，並具有3個其他屬性：

draggedContext：鏈接到拖動元素的上下文
- index：拖動元素索引
- element：拖動的元素，基礎視圖模型元素
- futureIndex：如果接受放置操作，則拖動元素的潛在索引
relatedContext：鏈接到當前拖動操作的上下文
- index：目標元素索引
- element：目標元素視圖模型元素
- list：目標列表
- component：目標VueComponent

HTML:

<draggable :list="list" :move="checkMove">

javascript:

checkMove: function(evt){
    return (evt.draggedContext.element.name!=='apple');
}

See complete example: Cancel.html, cancel.js

componentData

Type: Object Required: false Default: null

This props is used to pass additional information to child component declared by tag props. Value:

props: props to be passed to the child component
attrs: attrs to be passed to the child component
on: events to be subscribe in the child component

[譯]該props用於將附加信息傳遞給tag props聲明的子組件。值：

props：傳遞給子組件的props
attrs：要傳遞給子組件的attrs
on：要在子組件中訂閱的事件

Example (using element UI library):

<draggable tag="el-collapse" :list="list" :component-data="getComponentData()">
    <el-collapse-item v-for="e in list" :title="e.title" :name="e.name" :key="e.name">
        <div>{{e.description}}</div>
     </el-collapse-item>
</draggable>

methods: {
    handleChange() {
      console.log('changed');
    },
    inputChanged(value) {
      this.activeNames = value;
    },
    getComponentData() {
      return {
        on: {
          change: this.handleChange,
          input: this.inputChanged
        },
        attrs:{
          wrap: true
        },
        props: {
          value: this.activeNames
        }
      };
    }
  }

Events

Support for Sortable events:

start, add, remove, update, end, choose, unchoose, sort, filter, clone Events are called whenever onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone are fired by Sortable.js with the same argument. See here for reference

Note that SortableJS OnMove callback is mapped with the move prop
[譯]支持可排序事件：

start, add, remove, update, end, choose, unchoose, sort, filter, clone 每當使用相同參數的Sortable.js觸發onStart，onAdd，onRemove，onUpdate，onEnd，onChoose，onUnchoose，onSort，onClone時，都會調用事件。 請參閱此處以供參考

請注意，SortableJS OnMove回調與move prop映射

HTML:

<draggable :list="list" @end="onEnd">

change event

change event is triggered when list prop is not null and the corresponding array is altered due to drag-and-drop operation. This event is called with one argument containing one of the following properties:
- added: contains information of an element added to the array
 - newIndex: the index of the added element
 - element: the added element
- removed: contains information of an element removed from to the array
 - oldIndex: the index of the element before remove
 - element: the removed element
- moved: contains information of an element moved within the array
 - newIndex: the current index of the moved element
 - oldIndex: the old index of the moved element
 - element: the moved element
[譯]變更事件

當列表屬性不爲null且由於拖放操作而更改了相應的數組時，將觸發change事件。 使用包含以下屬性之一的一個參數調用此事件：
- added：包含添加到數組中的元素的信息
 - newIndex：添加元素的索引
 - element：已添加的元素
- removed：包含從數組中刪除的元素的信息
 - oldIndex：元素在刪除之前的索引
 - element：已刪除的元素
- moved：包含在數組中移動的元素的信息
 - newIndex：已移動元素的當前索引
 - oldIndex：已移動元素的舊索引
 - element：移動的元素

Slots

Limitation: neither header or footer slot works in conjunction with transition-group.

[譯]限制：header或footer插槽都不能與transition-group一起使用。

Header

Use the header slot to add none-draggable element inside the vuedraggable component. Important: it should be used in conjunction with draggable option to tag draggable element. Note that header slot will always be added before the default slot regardless its position in the template. Ex:

[譯]使用header插槽在vuedraggable組件內添加不可拖動的元素。重要提示：它應與draggable選項一起使用，以標記可拖動元素。請注意，無論標題插槽在模板中的位置如何，總會在默認插槽之前添加標題插槽。例如：

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="header" @click="addPeople">Add</button>
</draggable>

Footer

Use the footer slot to add none-draggable element inside the vuedraggable component. Important: it should be used in conjunction with draggable option to tag draggable elements. Note that footer slot will always be added after the default slot regardless its position in the template. Ex:

[譯]使用footer插槽在vuedraggable組件內添加不可拖動的元素。重要提示：它應與draggable選項一起使用，以標記可拖動元素。請注意，無論頁腳插槽在模板中的位置如何，始終將其添加到默認插槽之後。例如：

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>

Gotchas

Vue.draggable children should always map the list or value prop using a v-for directive
- You may use header and footer slot to by-pass this limitation.
Children elements inside v-for should be keyed as any element in Vue.js. Be carefull to provide revelant key values in particular:
- typically providing array index as keys won't work as key should be linked to the items content
- cloned elements should provide updated keys, it is doable using the clone props for example
[譯]Vue.draggable子項應始終使用v-for指令映射list或value prop
- 您可以使用header和footer插槽來繞過此限制。
v-for內的子元素應作爲Vue.js中的任何元素進行鍵控。請特別注意提供實用的鍵值：
- 通常提供數組索引，因爲鍵不起作用，因爲鍵應該鏈接到項目內容
- 克隆的元素應提供更新的密鑰，例如可以使用clone props來完成

Example

Full demo example

draggable-example

For Vue.js 1.0

See here

</draggable></draggable></draggable></draggable>