• Stars
    star
    1
  • Language
    JavaScript
  • Created over 7 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Vuejs directive for mobile drag and drop, pick and drop

vue-pickdrop

Vuejs directive for mobile drag and drop, pick and drop

ONLINE DEMO

Usage

There are two directives: v-pickdrag and v-pickdrop. For install in your project need import and use

import pickdrop from 'vue-pickdrop'

Vue.use(pickdrop)

v-pickdrag

  • v-pickdrag takes data which pass to drag event
  • When the element is drag then it is class pickdrag
  • Can be add multiple tags for specific drop-container with one of tag (v-pickdrag.red.fruit)
<div>
    <div class="item" v-pickdrag.red.fruit="'Apple'">
        <img src="icons/apple.svg" />
    </div>
</div>

<div>
    <div class="item" v-pickdrag.red="'Candy'">
        <img src="icons/candy.svg" />
    </div>
</div>

<div>
    <div class="item" v-pickdrag="'Carrot'">
        <img src="icons/carrot.svg" />
    </div>
</div>

v-pickdrop

  • v-pickdrop takes data which pass to drop event
  • @drop event. Param object: {dropData, dragData}
  • When drag element can be drop then it is class pickdrop
  • Can be add multiple tags for specific drag-container with one of tag (v-pickdrop.fruit)
<div class="dropitem" v-pickdrop="'Food'" @drop="dropHandler">
    <p>Food</p>
</div>
<div class="dropitem" v-pickdrop.fruit="'Fruit'" @drop="dropHandler">
    <p>Fruit</p>
</div>
<div class="dropitem" v-pickdrop.red="'Red'" @drop="dropHandler">
    <p>Red</p>
</div>
methods: {
    dropHandler({dragData, dropData}) {
        alert(`Drag: ${dragData}\nDrop: ${dropData}`);
    },
}