Skip to content

Instantly share code, notes, and snippets.

@Emilsone

Emilsone/Adding the Drag-and-Drop Functionality

Created March 20, 2023 20:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Emilsone/c3ac6fc1eba0cfa024040e75b164c7cd to your computer and use it in GitHub Desktop.
Save Emilsone/c3ac6fc1eba0cfa024040e75b164c7cd to your computer and use it in GitHub Desktop.
Download ZIP
Adding the Drag-and-Drop Functionality
Raw
Adding the Drag-and-Drop Functionality
<template>
<main>
<!-- component -->
<section class="article-section">
<div class="w-full p-8 flex justify-around ">
<div class="rounded bg-grey-light w-64 p-2 card-bg">
<div class="flex justify-between py-1">
<h3 class="text-lg">New Pitch</h3>
<svg class="h-4 fill-current text-grey-dark cursor-pointer" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" />
</svg>
</div>
<div class="text-sm mt-2">
<draggable class="draggable-list" :list="articles.newPitch" group="articles">
<div v-for="(article, i) in articles.newPitch" :key="i">
<div class="bg-white p-2 py-6 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter">
<p>{{ article }}</p>
<div class="text-grey-darker mt-2 ml-2 flex justify-between items-start">
<span class="text-xs flex items-center">
<svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path
d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" />
</svg>
3/5
</span>
</div>
</div>
</div>
<div class="flex justify-between align-middle items-center m-3">
<p class="mt-3 text-grey-dark flex justify-between"><svg xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
<span>Add a card...</span>
</p>
<span class="pt-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" />
</svg>
</span>
</div>
</draggable>
</div>
</div>
<div class="rounded bg-grey-light w-64 p-2 card-bg">
<div class="flex justify-between py-1">
<h3 class="text-lg">Content in Progress</h3>
<svg class="h-4 fill-current text-grey-dark cursor-pointer" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" />
</svg>
</div>
<div class="text-sm mt-2">
<div class="">
<draggable class="draggable-list" :list="articles.contentInProgress" group="articles">
<div v-for="(article, i) in articles.contentInProgress" :key="i">
<div class="bg-white p-2 py-6 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter">
<p>{{ article }}</p>
<div class="text-grey-darker mt-2 ml-2 flex justify-between items-start">
<span class="text-xs flex items-center">
<svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path
d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" />
</svg>
3/5
</span>
</div>
</div>
</div>
<div class="flex justify-between align-middle items-center m-3">
<p class="mt-3 text-grey-dark flex justify-between"><svg xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
<span>Add a card...</span>
</p>
<span class="pt-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" />
</svg>
</span>
</div>
</draggable>
</div>
</div>
</div>
<div class="rounded bg-grey-light w-64 p-2 card-bg">
<div class="flex justify-between py-1">
<h3 class="text-lg">Draft Received</h3>
<svg class="h-4 fill-current text-grey-dark cursor-pointer" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" />
</svg>
</div>
<div class="text-sm mt-2">
<div class="">
<draggable class="draggable-list" :list="articles.draftReceived" group="articles">
<div v-for="(article, i) in articles.draftReceived" :key="i">
<div class="bg-white p-2 py-6 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter">
<p>{{ article }}</p>
<div class="text-grey-darker mt-2 ml-2 flex justify-between items-start">
<span class="text-xs flex items-center">
<svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path
d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" />
</svg>
3/5
</span>
</div>
</div>
</div>
<div class="flex justify-between align-middle items-center m-3">
<p class="mt-3 text-grey-dark flex justify-between"><svg xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
<span>Add a card...</span>
</p>
<span class="pt-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" />
</svg>
</span>
</div>
</draggable>
</div>
</div>
</div>
<div class="rounded bg-grey-light w-64 p-2 card-bg">
<div class="flex justify-between py-1">
<h3 class="text-lg">In Review</h3>
<svg class="h-4 fill-current text-grey-dark cursor-pointer" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" />
</svg>
</div>
<div class="text-sm mt-2">
<div class="">
<draggable class="draggable-list" :list="articles.inReview" group="articles">
<div v-for="(article, i) in articles.inReview" :key="i">
<div class="bg-white p-2 py-6 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter">
<p>{{ article }}</p>
<div class="text-grey-darker mt-2 ml-2 flex justify-between items-start">
<span class="text-xs flex items-center">
<svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path
d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" />
</svg>
3/5
</span>
</div>
</div>
</div>
<div class="flex justify-between align-middle items-center m-3">
<p class="mt-3 text-grey-dark flex justify-between"><svg xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
<span>Add a card...</span>
</p>
<span class="pt-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" />
</svg>
</span>
</div>
</draggable>
</div>
</div>
</div>
</div>
</section>
</main>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment