Тёмный

Creating Animated Sortable Lists with Vue.js & Sortable.js 

DesignCourse
Подписаться 1,1 млн
Просмотров 35 тыс.
50% 1

skl.sh/designcourse23 - First 500 people to sign up will get their first 2 months free!
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we're going to hop back into the world of Vue and tackle the objective of creating an easy to use sortable list using Sortable.js. They provide a Vue wrapper for Sortable, which makes integration and customization a breeze! We'll start off by creating the project from scratch, and then integrating and customizing Sortable.
github.com/SortableJS/Vue.Dra...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

Хобби

Опубликовано:

 

30 апр 2019

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 56   
@DesignCourse
@DesignCourse 5 лет назад
Want more Vue? Subscribe!
@terryhenyo9216
@terryhenyo9216 5 лет назад
Yes! Vue is for Victory!
@LumbreraEnMiCamino
@LumbreraEnMiCamino 5 лет назад
Yes, please! we love Vue!! we want more Vue!
@abdullahQOmar
@abdullahQOmar 5 лет назад
Yassss
@alexandros-markovits
@alexandros-markovits 5 лет назад
Yup, as much as possible! haha
@afifassihab7953
@afifassihab7953 5 лет назад
yeah, vue is awsome
@mahmoudhassen4463
@mahmoudhassen4463 4 года назад
I was looking on the internet for a solution to make the list on my app draggable but after watching and applying the tutorial it finally worked so thank you so much. Your RU-vid videos are always amazing and helpful.
@alexandros-markovits
@alexandros-markovits 5 лет назад
What an awesome tutorial! Will surely use it at some point in the future. Thank you so much once again for all the effort!
@heshammahmoud7277
@heshammahmoud7277 5 лет назад
We Love Your tutorials
@eliahugarcialozano5813
@eliahugarcialozano5813 3 года назад
Nice and simple. Perfect tutorial!
@aris.konstantinidis
@aris.konstantinidis 3 года назад
Thank you so much, great tutorial!
@igorl.vicente7275
@igorl.vicente7275 4 года назад
Very helpful and clear.
@eduardknezovic9977
@eduardknezovic9977 3 года назад
Amazing tutorial!
@LumbreraEnMiCamino
@LumbreraEnMiCamino 5 лет назад
wow finally Vue !! thanks
@mushnikov35
@mushnikov35 5 лет назад
Thank You !
@aleksandrstaetskiy5687
@aleksandrstaetskiy5687 4 года назад
Very useful video. Thank you :)
@rekhashrama1143
@rekhashrama1143 5 лет назад
I love Vue sir ✌
@armandsalle8447
@armandsalle8447 5 лет назад
Love Vue, need more tutorial :)
@zvlehmlreano3002
@zvlehmlreano3002 5 лет назад
yeah i love vue !!!
@syed.simanta820
@syed.simanta820 5 лет назад
The best thing is he is showing using libraries wht others dont
@hassantariq8847
@hassantariq8847 5 лет назад
UI Knight 💎
@BENHAROUN-TV
@BENHAROUN-TV 5 лет назад
thanx teacher
@RexGalilae
@RexGalilae 5 лет назад
Hawkeye has retired from being a superhero and, this time, he makes coding tutorials on RU-vid
@DesignCourse
@DesignCourse 5 лет назад
I'm him, Edward Norton and TJ Dillashaw manifest as online educator.
@mikegogl
@mikegogl 2 года назад
thanks
@repiatx
@repiatx 5 лет назад
hey man thx for your tutorial. I'm wondering does vue needs to be installed on my webserver? can i deploy vue project ?
@ToddFathers
@ToddFathers 6 месяцев назад
How would you persist this in Firestore DB, maintaining the order?
@kayangevare981
@kayangevare981 3 года назад
Would love an update on how to do this on VueJS 3.x 😍
@fintechhorizonsmedia2570
@fintechhorizonsmedia2570 4 года назад
tnx
@AdamProcter_uk
@AdamProcter_uk 3 года назад
Thanks great videos as ever. I have this working but I am trying to save my data but how do you get the positions of the other items. New and old index would only give you the item you moved but all other items now also have new index? And then how do you load that order on mounted. I can’t seem to find any information on this final step - saving a list is really important and seems to be no one really points out how to do this final piece of the puzzle
@ridwanridiawan
@ridwanridiawan Год назад
Hi. How to save data list?
@sarlotakonvickova1394
@sarlotakonvickova1394 3 года назад
I like your video tutorial very much. Is posible to make nested array with Sortable.js?
@thecodebear
@thecodebear 5 лет назад
Please do more vue js
@SajidLatifDK
@SajidLatifDK 3 года назад
Nice...
@backendfyi
@backendfyi 5 лет назад
Can you please make a tutorial on mobx with React?
@FlorianHWave
@FlorianHWave 5 лет назад
Please make a sortable table with Vue JS!
@WikkiOnIlluminati
@WikkiOnIlluminati 2 года назад
Please make video for data table row sortable
@GeorgeFlorian12
@GeorgeFlorian12 4 года назад
What is sortable-drag ? There isn't one element in your template that has that class. I followed your tutorial and I can't lose the ghost effect because sortable-drag doesn't do a thing.
@wenjieye2073
@wenjieye2073 3 года назад
I cannot lost the ghost copy either.
@lazarpetrovic5390
@lazarpetrovic5390 4 года назад
What's this song in the end? It sounds awfully familiar
@ridwanridiawan
@ridwanridiawan Год назад
Hi sir, how to save data list update to firebase
@real-oppenheimer
@real-oppenheimer 5 лет назад
Hey Gary, from your point of view, what are the easiest things to do design-/animation-wise which have a big impact on a "static" website? I just created a basic design with Bulma and focused on the functionality, I just don't know where to start with the stuff that makes a website look and feel nice now.... PS: I'm pretty bad with CSS and design in general, that's why I asked for "easiest things".
@DesignCourse
@DesignCourse 5 лет назад
If you aren't great with design or animation, stick to what you're doing for the site now. Work on that other stuff on other practice projects.
@user-sl6ou3qb9l
@user-sl6ou3qb9l 5 лет назад
Any Examples on what we can use this for Can't think of any at the moment
@DesignCourse
@DesignCourse 5 лет назад
A todo list. Ordering items of importance from high to low. Dragging from one list to another under diff categories. Bunch of reasons
@basith237
@basith237 5 лет назад
How to save the order to database or when refresh button clicked? Thanks
@DesignCourse
@DesignCourse 5 лет назад
You do it on the on end method when a user changes the order.
@theeyeinthesky357
@theeyeinthesky357 5 лет назад
Pls make a video on nested sortable.js
@Savageboi506
@Savageboi506 5 лет назад
sortablejs.github.io/Sortable/#nested
@dr.vishal1401
@dr.vishal1401 5 лет назад
After UI design how to convert in coding please make a video about this
@DesignCourse
@DesignCourse 5 лет назад
I've done that in the past, just check out the channel vids!
@ralexand56
@ralexand56 5 лет назад
More react!
@ShahinHazari
@ShahinHazari 5 лет назад
Sir what is .js??? I have no any knowledge about it. But i have interest learning it. Please help me sir.
@ShahinHazari
@ShahinHazari 5 лет назад
@@vivigarr Thank you
@bulp9893
@bulp9893 5 лет назад
I am working in vue draggable project😍😍😍😍
@theantibeta
@theantibeta 4 года назад
"Creating"
Далее
Drag and Drop на Vue 3 / Уроки Vue
15:23
Просмотров 20 тыс.
Creating a Dark & Light Toggle Mode on your UI Designs
18:26
Making AWESOME Elastic SVG's from Scratch
14:17
Просмотров 12 тыс.
Easy VueJS Drag & Drop tutorial
15:52
Просмотров 51 тыс.
CSS Animation Optimization and Performance 101
23:13
Просмотров 38 тыс.
Vue.js Course for Beginners [2021 Tutorial]
3:39:56
Просмотров 1 млн
World’s Largest Jello Pool
1:00
Просмотров 95 млн
Small Act of Kindness is also a charity
1:00
Просмотров 46 млн
Best exercises to lose weight ! 😱
0:19
Просмотров 11 млн