使用vue-drag-drop实现ob欧宝体育信誉怎么样

2019.04/Vue

vue-drag-drop是HTML中Drag/Dropob欧宝体育信誉怎么样接口在Vue中的封装。

HTML元素ob欧宝体育信誉怎么样的基本原理是:

  • 鼠标选中一个可拖动的元素,移动鼠标到一个可放置的元素上,然后释放鼠标
  • 在拖动放置操作期间,会触发一系列事件,通过监听响应这些事件实现界面交互
  • 可拖动元素需添加属性draggable=”true”
  • 可放置元素需设置ondragover和ondrop响应事件
  • 在可拖动元素的ondragstart事件中,在dataTransfer属性上设置拖动的数据、图像和效果
  • 在可放置元素的ondrop事件中,获取放置上来的元素所携带的数据
  • 这里是Vue中使用vue-drag-drop实现的ob欧宝体育信誉怎么样,演示将诗词列表拖动到唐诗或宋词区域中实现分类收藏,借助Vuex在drag-panel和drop-panel组件之间共享ob欧宝体育信誉怎么样状态。

    拖动相关的store模块,dragType存放当前拖动元素的类型,是唐诗还是宋词。

    store/modules/drag.js
    import { DRAG } from '../types'

    export default {
    state: {
    dragType: null
    },

    getters: {
    dragType: state => state.dragType
    },

    mutations: {
    [DRAG.TYPE](state, dragType) {
    state.dragType = dragType
    }
    }
    }

    可拖动元素组件,拖动数据为诗词内容,开始拖动时设置dragType,拖动结束后清空dragType。通过slot设置了拖动时跟随鼠标的显示图像,相当于调用事件的dataTransfer.setDragImage方法。

    drag-panel.vue
    <template lang="pug">
    ul.list
    li(
    v-for="(item, index) in list"
    :key="index"
    )
    drag(
    :transfer-data="item"
    @dragstart="setDragType(item.type)"
    @dragend="setDragType(null)"
    )
    .drag-wrapper
    icon
    | {{ item.title }}
    div.drag-content(slot="image")
    | {{ item.title }}
    p {{ item.content }}
    </template>

    <script>
    import { mapMutations } from 'vuex'
    import { Drag } from 'vue-drag-drop'
    import Icon from './icon'

    export default {
    components: { Drag, Icon },

    props: {
    list: Array
    },

    methods: {
    ...mapMutations({
    setDragType: 'DRAG_TYPE'
    })
    // 除使用辅助函数映射,也可通过$store提交mutation
    // setDragType(type) {
    // this.$store.commit('DRAG_TYPE', type)
    // }
    }
    }
    </script>

    诗词的分类区域为可放置元素,当可拖动元素开始拖动时,与dragType相同的分类区域样式提示可放置,而其他分类区域则样式置灰,并通过@dragover事件将拖动效果dropEffect设为none。释放鼠标时,通过@drop事件获取诗词信息,保存收藏数据。

    drop-panel.vue
    <template lang="pug">
    .drop-container
    drop.drop-wrapper(
    v-for="(v, k) in collections"
    :key="k"
    :class="{ active: k === dragType, passive: dragType && k !== dragType }"
    @dragover="handleDragover(k, ...arguments)"
    @drop="handleDrop"
    )
    h2 {{ v.des }}收藏:
    ul
    li(
    v-for="(item, index) in v.list"
    :key="index"
    ) {{ item }}
    </template>

    <script>
    import { mapGetters, mapMutations } from 'vuex'
    import { Drop } from 'vue-drag-drop'

    export default {
    components: { Drop },

    computed: {
    ...mapGetters(['collections', 'dragType'])
    },

    methods: {
    ...mapMutations({
    addCollection: 'COLLECTIONS_ADD'
    }),

    handleDragover(type, data, event) {
    if (type !== data.type) {
    event.dataTransfer.dropEffect = 'none'
    }
    },

    handleDrop({ title }) {
    const list = this.collections[this.dragType].list
    if (list.indexOf(title) === -1) {
    this.addCollection({
    type: this.dragType,
    title
    })
    } else {
    alert('重复收藏')
    }
    }
    }
    }
    </script>

    主页面,组合拖动和放置组件,获取数据。

    App.vue
    <template lang="pug">
    .row
    .col.col-l
    drop-panel
    .col.col-r
    drag-panel(:list="list")
    </template>

    <script>
    import DragPanel from './drag-drop/drag-panel'
    import DropPanel from './drag-drop/drop-panel'
    import { list } from './drag-drop/list'

    export default {
    components: { DragPanel, DropPanel },

    data() {
    return {
    list: this._.shuffle(list)
    }
    }
    }
    </script>

    诗词数据列表。

    list.js
    export const list = [{
    title: '早发白帝城',
    type: 't',
    content: '朝辞白帝彩云间,千里江陵一日还。两岸猿声啼不住,轻舟已过万重山。'
    },
    // 省略...
    {
    title: '如梦令·昨夜雨疏风骤',
    type: 's',
    content: '昨夜雨疏风骤,浓睡不消残酒。试问卷帘人,却道海棠依旧。知否,知否?应是绿肥红瘦。'
    }]

    京ICP备14036213号-2