大家好,最近做的项目要用到拖拽排序,我现在的项目是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>
下面贴一下详细用法
- <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{
- width: 200px;
- height: 50px;
- line-height: 50px;
- margin: auto;
- position: relative;
- background: #ddd;
- margin-top:20px;
- }
- .ghostClass{
- opacity: 1;
- }
- .bottom{
- width: 200px;
- height: 50px;
- position: relative;
- background: blue;
- top:2px;
- left: 2px;
- transition: all .5s linear;
- }
- </style>
下面是结果

上下是可以拖动的,只是截图的话看不出效果来,小伙伴们注意了,里面有个options选项,这个选项怎么来的呢,据我观察这个插件是基于sortable.js,所以这个options里面的配置,和sortable.js是一样的,下面我贴两个地址,一个是vuedraggable的GitHub地址,一个是sortable.js的GitHub地址
vuedraggable: 学习地址
sortable.js:学习地址
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;
- }
- });
好了,今天的介绍就到这里啦,快去试试吧。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。