# drag-and-drop-widget
This is an abstracted drag and drop widget component. Originally from the Over The Dose Website.
# Example
<template>
<DragAndDropWidget
:options="{
debug: false,
width: '100%',
height: '220px',
subheader: '<p>Drag each flavor to its assigned vape.</p>',
droppableZones: [
{
accepts: ['popcorn'],
showLabel: true,
label: 'BUTTERY',
message: 'Diacetyl. This chemical creates a buttery flavor but also causes popcorn lung, a permanent medical condition.',
sprite: {
src:'/sprites/vape-bg.png',
size: '80px',
x: '18%',
y: '50px',
hideOnAnim: true,
breakpoints: [
{
minWidth: 767,
size: '100px'
}
],
animation: {
type: 'reveal-sprite',
sprite: {
src: '/sprites/buttery-lungs.png',
size: '80px',
x: '18%',
y: '50px',
infinite: true,
breakpoints: [
{
minWidth: 767,
size: '100px'
}
]
}
}
},
dropZone: {
size: '80px',
x: '18%',
y: '50px',
breakpoints: [
{
minWidth: 767,
size: '100px'
}
]
}
},
{
accepts: ['soft-serve'],
showLabel: true,
label: 'VANILLA',
message: 'Vanillin. It’s used to create a vanilla flavor, but it can be toxic to human cells.',
sprite: {
src:'/sprites/vape-bg.png',
size: '80px',
x: '50%',
y: '50px',
hideOnAnim: true,
breakpoints: [
{
minWidth: 767,
size: '100px'
}
],
animation: {
type: 'reveal-sprite',
sprite: {
src: '/sprites/germs.png',
size: '80px',
x: '50%',
y: '50px',
infinite: true,
breakpoints: [
{
minWidth: 767,
size: '100px'
}
]
}
}
},
dropZone: {
size: '80px',
x: '50%',
y: '50px',
breakpoints: [
{
minWidth: 767,
size: '100px'
}
]
}
},
{
accepts: ['cinnamon-roll'],
showLabel: true,
label: 'CINNAMON',
message: 'Aldehydes. That cinnamon flavor belongs to the same chemical class as formaldehyde, the stuff they use to preserve dead bodies.',
sprite: {
src:'/sprites/vape-bg.png',
size: '80px',
x: '82%',
y: '50px',
hideOnAnim: true,
breakpoints: [
{
minWidth: 767,
size: '100px'
}
],
animation: {
type: 'reveal-sprite',
sprite: {
src: '/sprites/dirty-water.png',
size: '80px',
x: '82%',
y: '50px',
infinite: true,
breakpoints: [
{
minWidth: 767,
size: '100px'
}
]
}
}
},
dropZone: {
size: '80px',
x: '82%',
y: '50px',
breakpoints: [
{
minWidth: 767,
size: '100px'
}
]
}
}
],
draggableItems: [
{
name: 'popcorn',
sprite: '/sprites/popcorn.png',
size: '60px',
x: '18%',
y: '150px',
infinite: false
},
{
name: 'soft-serve',
sprite: '/sprites/soft-serve.png',
size: '30px',
x: '50%',
y: '150px',
infinite: false
},
{
name: 'cinnamon-roll',
sprite: '/sprites/cinnamon-roll.png',
size: '60px',
x: '82%',
y: '150px',
infinite: false
}
]
}" />
<template>
<script>
import { DragAndDropWidget } from "@rescue/vue-modules";
export default {
components: {
DragAndDropWidget
}
}
</script>
# Installation
Install @rescue/vue-modules.
npm install @rescue/vue-modules
You also need node-sass, sass-loader, jquery, jquery-ui, jquery-ui-touch-punch and gsap
npm install node-sass sass-loader jquery jquery-ui-touch-punch gsap
# Usage
The easiest way to start using this component is by copying the following premade component with this data model:
<DragAndDropWidget
:options="{
debug: false,
width: '',
height: '',
header: '',
subheader: '',
droppableZones: [
{
accepts: [''],
showLabel: true,
label: 'BUTTERY',
message: '',
sprite: {
src:'',
size: '',
x: '',
y: '',
hideOnAnim: false,
breakpoints: [
{
minWidth: 767,
// Props to change on breakpoing go here
}
],
animation: {
type: '',
sprite: {
src: '',
size: '',
x: '',
y: '',
infinite: true,
breakpoints: [
{
minWidth: 767,
// Props to change on breakpoing go here
}
]
}
}
},
dropZone: {
size: '',
x: '',
y: '',
breakpoints: [
{
minWidth: 767,
// Props to change on breakpoing go here
}
]
}
}
],
draggableItems: [
{
name: '',
sprite: '',
size: '',
x: '',
y: '',
infinite: false,
breakpoints: [
{
minWidth: 767,
// Props to change on breakpoing go here
}
]
}
]
}" />