vuedraggable：vue拖拽排序插件

最近做的项目要用到拖拽排序，我现在的项目是vue项目，所以我就屁颠屁颠的去百度有木有这样功能的插件，我就知道一定会有，那就是vuedraggable，这是一款很棒的拖拽插件，下面我来说一下怎么引入

首先在vue项目中，用npm包下载下来

npm install vuedraggable -S

下载下来后，引入插件，在你的vue文件的script标签里面这样引入

import draggable from 'vuedraggable'

别忘了下面要注册组件

components: {
    draggable
},

然后就可以在template标签里面使用了

单个组件

<draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
            <transition-group>
                <div v-for="element in colors" :key="element.text" class = "drag-item">
                    {{element.text}}
                </div>
            </transition-group>
 </draggable>

2个组件左右结构

<el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="对外产品名称">
                <el-input v-model="proAttribute.description" placeholder="对外产品名称" style=" 250px"></el-input>
              </el-form-item>
              <el-form-item label="对外产品属性">
              <template>
                <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
                  <transition-group>
                    <div v-for="element in colors" :key="element.text" class = "drag-item">
                      {{element.text}}
                    </div>
                  </transition-group>
                </draggable>
              </template>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="对内产品名称">
                <el-input v-model="proAttribute.description" placeholder="对内产品名称" style=" 250px"></el-input>
              </el-form-item>
              <el-form-item label="对内产品属性">
              <template>
                <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
                  <transition-group>
                    <div v-for="element in colors" :key="element.text" class = "drag-item">
                      {{element.text}}
                    </div>
                  </transition-group>
                </draggable>
              </template>
              </el-form-item>
            </el-col>
          </el-row>

下面贴一下详细用法

<template>
    <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
            <transition-group>
                <div v-for="element in colors" :key="element.text" class = "drag-item">
                    {{element.text}}
                </div>
            </transition-group>
    </draggable>
</template>

<script>
    import draggable from 'vuedraggable'
    export default{
        data(){
            return{
                msg:"这是测试组件",
                colors: [
                    {
                        text: "Aquamarine",
                    }, 
                    {
                        text: "Hotpink",
                    }, 
                    {
                        text: "Gold",
                    }, 
                    {
                        text: "Crimson",
                    }, 
                    {
                        text: "Blueviolet",
                    },
                    {
                        text: "Lightblue",
                    }, 
                    {
                        text: "Cornflowerblue",
                    }, 
                    {
                        text: "Skyblue",
                    }, 
                    {
                        text: "Burlywood",
                    }
                ],
                startArr:[],
                endArr:[],
                count:0,
            }
        },
        components: {
        　　draggable
        },
        methods:{
            getdata (evt) {
                console.log(evt.draggedContext.element.text)
            },
            datadragEnd (evt) {
                evt.preventDefault();
                console.log('拖动前的索引 :' + evt.oldIndex)
                console.log('拖动后的索引 :' + evt.newIndex)
                console.log(this.colors);
            }
        },
        mounted () {
	        //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
            document.body.ondrop = function (event) {
                event.preventDefault();
                event.stopPropagation();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .test{
        border:1px solid #ccc;
    }
    .drag-item{
         200px;
        height: 50px;
        line-height: 50px;
        margin: auto;
        position: relative;
        background: #ddd;
        margin-top:20px;
    }
    .ghostClass{
        opacity: 1;
    }
    .bottom{
         200px;
        height: 50px;
        position: relative;
        background: blue;
        top:2px;
        left: 2px;
        transition: all .5s linear;
    }
</style>

资源搜索网站大全 http://www.szhdn.com

options配置如下

var sortable = new Sortable(el, {
	group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
	sort: true,  // sorting inside list
	delay: 0, // time in milliseconds to define when the sorting should start
	touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
	disabled: false, // Disables the sortable if set to true.
	store: null,  // @see Store
	animation: 150,  // ms, animation speed moving items when sorting, `0` — without animation
	handle: ".my-handle",  // Drag handle selector within list items
	filter: ".ignore-elements",  // Selectors that do not lead to dragging (String or Function)
	preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
	draggable: ".item",  // Specifies which items inside the element should be draggable
	ghostClass: "sortable-ghost",  // Class name for the drop placeholder
	chosenClass: "sortable-chosen",  // Class name for the chosen item
	dragClass: "sortable-drag",  // Class name for the dragging item
	dataIdAttr: 'data-id',

	forceFallback: false,  // ignore the html5 DnD behaviour and force the fallback to kick in

	fallbackClass: "sortable-fallback",  // Class name for the cloned DOM Element when using forceFallback
	fallbackOnBody: false,  // Appends the cloned DOM Element into the Document's Body
	fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.

	scroll: true, // or htmlElement
	scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
	scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
	scrollSpeed: 10, // px

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

	// Element is chosen
	onChoose: function (/**Event*/evt) {
		evt.oldIndex;  // element index within parent
	},

	// Element dragging started
	onStart: function (/**Event*/evt) {
		evt.oldIndex;  // element index within parent
	},

	// Element dragging ended
	onEnd: function (/**Event*/evt) {
		var itemEl = evt.item;  // dragged HTMLElement
		evt.to;    // target list
		evt.from;  // previous list
		evt.oldIndex;  // element's old index within old parent
		evt.newIndex;  // element's new index within new parent
	},

	// Element is dropped into the list from another list
	onAdd: function (/**Event*/evt) {
		// same properties as onEnd
	},

	// Changed sorting within list
	onUpdate: function (/**Event*/evt) {
		// same properties as onEnd
	},

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

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

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

	// Event when you move an item in the list or between lists
	onMove: 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
	},

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