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

demo gif

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/sortablejs@1.8.4/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>

来源：oschina

链接：https://my.oschina.net/yangyishe/blog/4393287

标签

element

github

vue.draggable

sortable

Vue.js