Flash Code#1 Drag&Drop Component Using Vue.js
Tags: vue, javascript, webdev, codenewbie
Published: 2020-10-07 13:33:45

In this short article I will show you how to create a drag and drop component using **Vue.js** and **Tailwindcss**.
### Preview
**link**: [Flash Code](https://karm0s.github.io/FlashCode/)

![Drag Drop](https://dev-to-uploads.s3.amazonaws.com/i/inb8rvp23q03n9qchmlf.png)

## Let's start with the UI:
We will put a single div with a few tailwind classes:
{% gist https://gist.github.com/Karm0s/70c225df40177aea18587ade506b3a44.js %}
What those css classes do:
- **bg-gray-200**, **rounded-lg**, **border-2**, **border-dashed**, and **border-gray-500**: These are Tailwindcss classes. They are pretty self explanatory but if you want more infos you can checkout Tailwind's [docs](https://tailwindcss.com/docs/installation).
- **dropzone**: Sets the width to 400px and the height to 500px.

And that's what we get:
![Drop Area](https://dev-to-uploads.s3.amazonaws.com/i/1xnwswmul1s8dpxcqyco.png)

Now let's add some text inside. We can do that by simply adding another div inside the first one.
{% gist https://gist.github.com/Karm0s/3f421a1d381b1ddaa0a0ee87ba31950e.js %}
All the css classes are from Tailwindcss except for **dropzone-child-elements**, this class prevents the user from interacting with the content inside the dropzone and it contains only one rule:
      **pointer-events: none;**

This is what it looks like:
![Text Inside Drop Area](https://dev-to-uploads.s3.amazonaws.com/i/7gst9smfrs4mcsqvvhhi.png)

## It's time to make it do something (the logic):
1-**Change the border color when dragging a file:**
First, let's make the dropzone interactive by changing the border color when a file is dragged in. We will use the **dragenter** and **dragleave** events to detect if a file  is hovering the drop area. We will use a variable named **fileOverDropArea** to control the border color.
{% gist https://gist.github.com/Karm0s/4b829d22596b0f57945fa7b562e2e221.js %}
**Let me explain how it works:**
This code sets **fileOverDropArea** to **true** or **false** when a file is entering or leaving the drop down area.
**.prevent** cancels the default actions when those events are fired.
{% gist https://gist.github.com/Karm0s/eaa54e2b5bd76b3061a0cef0dc9bc613.js %}

Thanks to Vue we can bind the class attribute to add some classes only if certain conditions are met. In this case we are setting the border color to a dark gray if **fileOverDropArea** is **false** and to red if it is **true**.
{% gist https://gist.github.com/Karm0s/7d67fa22d263d9fdfa326ac3db8cf2a5.js %}

**2- Handling the file upload:**
Now that we got the hover animation to work, let's handle the file uploading part.
This is the easiest part actually, all we have to do is to listen for another event called **drop** and then call a method when the event is fired.
To do that we will add this line of code to the dropzone div:
~~~
@drop.prevent="dropFile"
~~~
This is the code of the **dropFile** method:
{% gist https://gist.github.com/Karm0s/0c8f1966290e6ff997d7c5d35f1b70c7.js %}

## Complete Component Code:
{% gist https://gist.github.com/Karm0s/5797ffd2c67e9a2bde9b184a6dfe908b.js %}

## A quick word about this series:
**Flash Code** is a series of posts showing you how to build various components using Vuejs. This was the first post, and many will come out in the following weeks.
I would love to hear your thoughts on this first post (this is actually my first blog post ever).
Thanks for reading.