vue-drag-2.0 v1.5.0

Vue-dragable

适用于vue2.0

github: https://github.com/ppya0812/vue-dragable

使用方法

NPM安装

npm install vue-drag
	

页面调用

<template>
	<div v-sortable="{onUpdate: onUpdate, preventOnFilter: false}" class="drag-list">
		<div v-for="v in list" :key="v" class="drag-item">
		</div>
	</div>
</template>
<script>
import Vue from 'vue'
import Drag from '@/wm-kit/packages/drag/src/vueDrag'

Vue.use(Drag)
export default {
	data() {
		return {
	    list: ['Foo', 'Bar', 'Baz']
		}
  },
  methods: {
    onUpdate: function (event) {
      this.list.splice(event.newIndex, 0, this.list.splice(event.oldIndex, 1)[0])
    }
  }
}
</script>

使用示例

<template>
	<div v-sortable="{onUpdate: onUpdate, preventOnFilter: false}" class="drag-list">
		<div v-for="v in list" :key="v" class="drag-item">
			{{v}}
		</div>
	</div>
</template>

<script>
import Vue from 'vue'
import Drag from '@/wm-kit/packages/drag/src/vueDrag'

Vue.use(Drag)
export default {
	data() {
		return {
	    list: ['Foo', 'Bar', 'Baz']
		}
  },
  methods: {
    onUpdate: function (event) {
      this.list.splice(event.newIndex, 0, this.list.splice(event.oldIndex, 1)[0])
    }
  }
}

</script>

<style>
	.drag-list {
		border: 1px solid #f6f6f6;
		width: 50%;
	}
	.drag-item {
		border-top: 1px solid #f6f6f6;
		height: 30px;
		line-height: 30px;
		background: #ccc;
	}
	.sortable-chosen {
		background: #f5f5f5;
	}

</style>

API 属性介绍 Attributes:

函数api

1.setData

function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
	dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
}

2. onChoose:

function (/**Event*/evt) {
	evt.oldIndex;  // element index within parent
}

3. onStart:

// Element dragging started

function (/**Event*/evt) {
	evt.oldIndex;  // element index within parent
}

4. onEnd:

// Element dragging ended
function (/**Event*/evt) {
	evt.oldIndex;  // element's old index within parent
	evt.newIndex;  // element's new index within parent
},

5. onAdd:

// Element is dropped into the list from another list
function (/**Event*/evt) {
	var itemEl = evt.item;  // dragged HTMLElement
	evt.from;  // previous list
	// + indexes from onEnd
},

6. onUpdate:

// Changed sorting within list
function (/**Event*/evt) {
	var itemEl = evt.item;  // dragged HTMLElement
	// + indexes from onEnd
},

7. onSort:

// Called by any change to the list (add / update / remove)
function (/**Event*/evt) {
	// same properties as onUpdate
},

8. onRemove:

// Element is removed from the list into another list
function (/**Event*/evt) {
	// same properties as onUpdate
},

9. onFilter:

// Attempt to drag a filtered element
function (/**Event*/evt) {
	var itemEl = evt.item;  // HTMLElement receiving the `mousedown|tapstart` event.
},

10. onMove:

// Event when you move an item in the list or between lists
function (/**Event*/evt, /**Event*/originalEvent) {
	// Example: http://jsbin.com/tuyafe/1/edit?js,output
	evt.dragged; // dragged HTMLElement
	evt.draggedRect; // TextRectangle {left, top, right и bottom}
	evt.related; // HTMLElement on which have guided
	evt.relatedRect; // TextRectangle
	originalEvent.clientY; // mouse position
	// return false; — for cancel
},

11. onClone:

// Called when creating a clone of element
function (/**Event*/evt) {
	var origEl = evt.item;
	var cloneEl = evt.clone;
}