{"id":28187,"date":"2022-11-14T08:44:53","date_gmt":"2022-11-14T08:44:53","guid":{"rendered":"http:\/\/implement-drag-and-drop-on-images-in-vue"},"modified":"2025-02-16T07:53:05","modified_gmt":"2025-02-16T15:53:05","slug":"implement-drag-and-drop-on-images-in-vue","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/","title":{"rendered":"Implement Drag and Drop on Images in Vue"},"content":{"rendered":"

Many apps you\u2019ll encounter have images that you drag and drop in different locations for a number of reasons. It may help users reorganize their photo libraries or it can simplify a process. That\u2019s why we\u2019re going to build a front-end app to handle this type of drag and drop functionality.<\/p>\n

We\u2019re going to build a Vue app that lets us change the order of images using drag and drop and the images will come from your own Cloudinary account. By the time you finish, you\u2019ll have a Vue app that calls the Cloudinary API for images and lets you move them around.<\/p>\n

Set up Vue project<\/h2>\n

Make sure you have Vue installed globally first. You can check that you have it installed with the following command:<\/p>\n

$ vue --version\n\n@vue\/cli 5.0.8\n<\/code><\/span><\/pre>\n
If you don\u2019t have Vue installed, check out the instructions here<\/a>. After this check, we can generate a new Vue project with this command:<\/p>\n
$ vue create drag-and<\/span>-drop\n\nVue CLI v5.0<\/span>.8<\/span>\n? Please pick a preset: Default<\/span> ([Vue 3<\/span>] babel, eslint)\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Select the Vue 3 version because this is the most up-to-date version. Once the project has been set up, go to the drag-and-drop<\/code> directory and briefly look through the files to get a sense of what we\u2019re starting with. Go to src > components > HelloWorld.vue<\/code>. This is the file we\u2019re going to modify to implement the drag and drop functionality with the images we fetch from Cloudinary.<\/p>\n
# .env<\/span>\nCLOUDINARY_API_KEY=0428567402670<\/span>\nCLOUDINARY_API_SECRET=hg92hgn9u2ngi24i\nCLOUDINARY_CLOUD_NAME=ojwgfro\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
One last thing we need to do is install the packages we\u2019ll be working with. Run the following command to do that:<\/p>\n
npm i express cors axios vuedraggable\n<\/code><\/span><\/pre>\n
The reason we need some of these packages is that we\u2019re going to make a tiny proxy app that makes the request to the Cloudinary API. You can\u2019t call this API directly from the front-end because it would expose your API secret, allowing anyone to make requests to your Cloudinary account. So we\u2019re going to start by making this proxy.<\/p>\n
Making the Cloudinary request for the images<\/h2>\n
In the root of your project, add a new file called proxy.js<\/code> and add the following code:<\/p>\n
\/\/ proxy.js<\/span>\nconst<\/span> express = require<\/span>('express'<\/span>);\nconst<\/span> cors = require<\/span>('cors'<\/span>);\nconst<\/span> axios = require<\/span>('axios'<\/span>);\n\nconst<\/span> app = express();\nconst<\/span> port = 3004<\/span>;\n\napp.use(cors());\n\napp.get('\/images'<\/span>, async<\/span> (req, res) => {\n    const<\/span> results = await<\/span> axios.get(\n    `https:\/\/api.cloudinary.com\/v1_1\/${process.env.CLOUDINARY_CLOUD_NAME}<\/span>\/resources\/image`<\/span>,\n      {\n        headers<\/span>: {\n        Authorization<\/span>: `Basic ${Buffer.from<\/span>(\n          process.env.CLOUDINARY_API_KEY +\n          \":\"<\/span> +\n          process.env.CLOUDINARY_API_SECRET\n        ).toString(\"base64\"<\/span>)}<\/span>`<\/span>,\n        },\n      }\n    ).then((response<\/span>) =><\/span> {\n        const<\/span> { resources } = response.data;\n\n        const<\/span> allImgs = resources.map((resource<\/span>) =><\/span> ({\n            url<\/span>: resource.secure_url,\n            title<\/span>: resource.public_id,\n        }));\n    \n        res.json({images<\/span>: allImgs});\n    });\n});\n\napp.listen(port, () => {\n    console<\/span>.log(`Proxy listening on port ${port}<\/span>`<\/span>);\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We start by importing a few packages and setting up the Express app. Then we create a GET endpoint that makes the Cloudinary API request and fetches the data we need. The Cloudinary API uses those credentials we got from the dashboard earlier. Then we handle the response and get the values we need from it to send to our Vue front-end.<\/p>\n
To wrap up this proxy, we listen to the app on the defined port<\/code> and print a message to the console so we know it\u2019s working. That\u2019s all we need to get our Cloudinary images. So let\u2019s turn our attention to the front-end.<\/p>\n
Render the images<\/h2>\n
A new Vue app comes with a good amount of boilerplate and we\u2019re going to take advantage of that. The only file we\u2019ll need to edit is src > components > HelloWorld.vue<\/code>. This will hold the code that fetches images from our proxy, render them, and let us drag them around. So open the HelloWorld.vue<\/code> file and replace all of the contents with this code:<\/p>\n
\/\/ HelloWorld.vue\n<template<\/span>><\/span>\n  <div<\/span> class<\/span>=\"hello\"<\/span>><\/span>\n    <h1<\/span>><\/span>{{ msg }}<\/h1<\/span>><\/span>\n    <draggable<\/span>\n      :list<\/span>=\"images\"<\/span>\n      item-key<\/span>=\"title\"<\/span>\n      @start<\/span>=\"drag=true\"<\/span>\n      @end<\/span>=\"drag=false\"<\/span>\n    ><\/span>\n      <template<\/span> #item<\/span>=\"{element}\"<\/span>><\/span>\n        <div<\/span>><\/span>\n          <img<\/span> :src<\/span>=\"element.url\"<\/span> width<\/span>=\"150\"<\/span> height<\/span>=\"150\"<\/span> \/><\/span>\n        <\/div<\/span>><\/span>\n      <\/template<\/span>><\/span>\n    <\/draggable<\/span>><\/span>\n  <\/div<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<script<\/span>><\/span>\nimport<\/span> draggable from<\/span> 'vuedraggable'<\/span>\nexport<\/span> default<\/span> {\n  name<\/span>: 'HelloWorld'<\/span>,\n  props<\/span>: {\n    msg<\/span>: String<\/span>\n  },\n  components<\/span>: {\n      draggable,\n  },\n  data() {\n    return<\/span> {\n      drag<\/span>: false<\/span>,\n      images<\/span>: []\n    }\n  },\n  methods<\/span>: {\n    async<\/span> getImages() {\n      await<\/span> fetch(\"http:\/\/localhost:3004\/images\"<\/span>).then(async<\/span> (data) => {\n        const<\/span> imageData = (await<\/span> data.json()).images;\n        this<\/span>.images = imageData;\n      });\n    }\n  },\n  mounted() {\n    this<\/span>.getImages()\n  }\n}\n<\/span><\/script<\/span>><\/span>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only --><\/span>\n<style<\/span> scoped<\/span>><\/span>\nh3<\/span> {\n  margin<\/span>: 40px<\/span> 0<\/span> 0<\/span>;\n}\nul<\/span> {\n  list-style-type<\/span>: none;\n  padding<\/span>: 0<\/span>;\n}\nli<\/span> {\n  display<\/span>: inline-block;\n  margin<\/span>: 0<\/span> 10px<\/span>;\n}\na<\/span> {\n  color<\/span>: #42b983<\/span>;\n}\n<\/span><\/style<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We\u2019ll start by walking through what\u2019s going on in the <script><\/code> first and come back to the <template><\/code> in a bit. Everything in the <script><\/code> handles the logic, data, and functions that get called. We start by importing the draggable<\/code> component from a package we installed earlier. Then we define the props<\/code> for the HelloWorld<\/code> component, which is some leftover from the boilerplate. This allows us to pass a msg<\/code> to the component when it\u2019s called in App.vue<\/code>.<\/p>\n
Next, we add draggable<\/code> to components<\/code> so that it will be accessible when we\u2019re ready to render our images in the <template><\/code>. Then we set up the data<\/code> the app will use. These are our state variables. drag<\/code> is how we\u2019ll keep track of when a specific element is being moved around and images<\/code> is the array that will store the images we fetch from the Cloudinary API.<\/p>\n
Fetch images from the Cloudinary proxy<\/h3>\n
The methods<\/code> contains all of the functions that we want to use in this component. We only have getImages<\/code> here and it\u2019s an async function that calls the proxy app we created. It returns the image data and updates the images<\/code> state we declared. Next, there is the mounted<\/code> lifecycle method. This method executes on the initial page load of a Vue app. We\u2019re getting the images from the proxy each time this page is initially rendered.<\/p>\n
That covers everything happening in the <script><\/code>. Now we can discuss the actual drag and drop implementation displayed to users.<\/p>\n
Add drag and drop functionality<\/h3>\n
Let\u2019s look at the <template><\/code> at the top of the file to cover what gets rendered to the user. There are only 2 main elements: the <div><\/code> that displays the msg<\/code> prop passed to the component and <draggable><\/code> which has a few props we need to set. First, we set the :list<\/code> prop to our images<\/code> state to loop through all of the images and make them draggable. We\u2019re using :list<\/code> instead of :model<\/code> so that the order of images updates when they get moved.<\/p>\n
Then we define the key<\/code> as the image title for the elements we\u2019re about to generate. Finally, we toggle the drag\/drop state based on our drag<\/code> state variable. Inside of <draggable><\/code>, there\u2019s another <template><\/code> with the #item<\/code> defined as element<\/code>. This element<\/code> is the current object from the images<\/code> array. That\u2019s how we\u2019re able to display all of the images to the user.<\/p>\n
Now run your app with and proxy with the following commands:<\/p>\n
npm run serve # starts Vue app<\/span>\nnode proxy.js # starts Express proxy<\/span>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
You should be able to see all of the images load and change their order.<\/p>\n
\"all<\/p>\n
\"image<\/p>\n
This gives you some simple drag and drop functionality that you can expand on to fit any Vue app you\u2019re working with.<\/p>\n
Finished code<\/h2>\n
You can take a look at the complete code in the camera-filter<\/code> folder of this repo<\/a>. Or you can check it out in this Code Sandbox<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Conclusion<\/h2>\n
It\u2019s always good to learn about different frameworks and how they work compared to ones you\u2019re more familiar with. Implementing drag and drop functionality is a common request for all kinds of applications. Learning how to do these kinds of common tasks in different frameworks or using different packages or approaches will help you grow into a more senior developer quickly.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28188,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,371,315],"class_list":["post-28187","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-under-review","tag-vue"],"acf":[],"yoast_head":"\nImplement Drag and Drop on Images in Vue<\/title>\n<meta name=\"description\" content=\"Let's build a simple drag and drop component in Vue using the `vuedraggable` package.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Implement Drag and Drop on Images in Vue\" \/>\n<meta property=\"og:description\" content=\"Let's build a simple drag and drop component in Vue using the `vuedraggable` package.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-14T08:44:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-16T15:53:05+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923593\/Web_Assets\/blog\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Implement Drag and Drop on Images in Vue\",\"datePublished\":\"2022-11-14T08:44:53+00:00\",\"dateModified\":\"2025-02-16T15:53:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923593\/Web_Assets\/blog\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Under Review\",\"Vue\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/\",\"name\":\"Implement Drag and Drop on Images in Vue\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923593\/Web_Assets\/blog\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07.jpg?_i=AA\",\"datePublished\":\"2022-11-14T08:44:53+00:00\",\"dateModified\":\"2025-02-16T15:53:05+00:00\",\"description\":\"Let's build a simple drag and drop component in Vue using the `vuedraggable` package.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923593\/Web_Assets\/blog\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923593\/Web_Assets\/blog\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07.jpg?_i=AA\",\"width\":4751,\"height\":3002},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Implement Drag and Drop on Images in Vue\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Implement Drag and Drop on Images in Vue","description":"Let's build a simple drag and drop component in Vue using the `vuedraggable` package.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/","og_locale":"en_US","og_type":"article","og_title":"Implement Drag and Drop on Images in Vue","og_description":"Let's build a simple drag and drop component in Vue using the `vuedraggable` package.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-11-14T08:44:53+00:00","article_modified_time":"2025-02-16T15:53:05+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923593\/Web_Assets\/blog\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/"},"author":{"name":"","@id":""},"headline":"Implement Drag and Drop on Images in Vue","datePublished":"2022-11-14T08:44:53+00:00","dateModified":"2025-02-16T15:53:05+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923593\/Web_Assets\/blog\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07.jpg?_i=AA","keywords":["Guest Post","Image","Under Review","Vue"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/","name":"Implement Drag and Drop on Images in Vue","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923593\/Web_Assets\/blog\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07.jpg?_i=AA","datePublished":"2022-11-14T08:44:53+00:00","dateModified":"2025-02-16T15:53:05+00:00","description":"Let's build a simple drag and drop component in Vue using the `vuedraggable` package.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923593\/Web_Assets\/blog\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923593\/Web_Assets\/blog\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07.jpg?_i=AA","width":4751,"height":3002},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/implement-drag-and-drop-on-images-in-vue\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Implement Drag and Drop on Images in Vue"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923593\/Web_Assets\/blog\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07\/e6761e021e376f23955950c6794cdc62cd724860-4751x3002-1_2818899f07.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28187"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28187\/revisions"}],"predecessor-version":[{"id":36836,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28187\/revisions\/36836"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28188"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If you don\u2019t already have a Cloudinary account, go set one up for free here<\/a>. Upload a few images that you want to play with in this app. Then take note of your cloud name<\/code>, API key<\/code>, and API secret<\/code> in the Dashboard. You\u2019ll need these to fetch the images we\u2019ll drag around. Make a .env<\/code> file in the root of your project similar to this to hold those values:<\/p>\n