vue-drag-2.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:

name	type	default	description
group	String	'name'	or { name: "...", pull: [true, false, clone], put: [true, false, array] }
delay	number	0	延迟时间 time in milliseconds to define when the sorting should start
sort	Boolean	true	是否排序sorting inside list
disabled	Boolean	false	drag功能失效Disables the sortable if set to trueshould start
animation	Boolean	150	ms, animation speed moving items when sorting, 0 — without animation
preventOnFilter	Boolean	true	不阻止非filter区域的默认事件 Call event.preventDefault() when triggered filter
store	Object	null	@see Store
handle	String	'.my-handle'	Drag handle selector within list itemsfilter
filter	String	".ignore-elements"	过滤不拖拽的元素 Selectors that do not lead to dragging (String or Function) should filter
draggable	String	".item"	Specifies which items inside the element should be draggable
ghostClass	String	"sortable-ghost"	// Class name for the drop placeholder
chosenClass	String	"sortable-chosen"	// Class name for the chosen item
dragClass	String	"sortable-drag"	// Class name for the dragging item
dataIdAttr	String	'data-id'
forceFallback	String	false	// ignore the HTML5 DnD behaviour and force the fallback to kick in
fallbackClass	String	"sortable-fallback"	// Class name for the cloned DOM Element when using forceFallback
fallbackOnBody	String	false	// Appends the cloned DOM Element into the Document's Body
fallbackTolerance	String	0	// Specify in pixels how far the mouse should move before it's considered as a drag.
scroll	String	true	// or HTMLElement
scrollFn	String	function(offsetX, offsetY, originalEvent) { ... }	// if you have custom scrollbar scrollFn may be used for autoscrolling
scrollSensitivity	String	30	// px, how near the mouse must be to an edge to start scrolling.
scrollSpeed	String	10	// px

函数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;
}