Drag and Drop Card Using HTML CSS And JavaScript | SortableJS

[@deepakdubey1395]

It’s smooth. The animation is really good. Which is what I’d expect from something like sortable. I personally tend to prefer when the thing you’re dragging is no longer in the list and there’s just an empty space until you release the item, but that’s just a personal preference. You could try playing around with that idea though to see if you can get it to work

[@Bedimcode]

Of course, friend, if you can. If you insert these properties in the following classes, you will get the result you want. Greetings. .sortable-chosen { opacity: 0; } .sortable-drag { opacity: 1; }

[@ti2542]

youtube - Bedimcode uploaded a new video! me to vs code - Let's enjoy

[@alixanovsarvar3572]

so amazing buddy at the moment I learnt new info from you keep it up

[@Bedimcode]

Thank's my friend regards

[@blessdarah1256]

Hey Bedim... I love the tutorial. I'm gonna give sortable a try for a project I'm currently working on

[@Bedimcode]

Thanks for the comment friend. Sure use it is a very used library and it has different functions. Greetings and success

[@ashishingle9298]

You are doing great bro. I'm a student from India..i found this tutorial informative. Love from India ♥️🇮🇳

[@Bedimcode]

Thank's my friend regards

[@ashishingle9298]

@@Bedimcode friend there is a suggestion for you, if you could make videos with voiceover it could be more effective..!☺️👌🙏

[@m1akarov2021]

very cool and fast, thanks for the lesson

[@julio5434]

💗💗💗

[@hyfydistro]

You could just select `.drop` (the whole container) and that would work too. 👌 ``` const draggableArea = document.querySelector(".drag"); new Sortable(draggableArea, { animation: 150, ghostClass: 'blue-background-class' }); ```

[@Bedimcode]

What a good data, greetings.

[@lorenzo_virano]

You are amazing!

[@Bedimcode]

Thank you friend Lorenzo

[@mikekong1874]

it's dope, keep going

[@frontenddevelopment2915]

It's really amazing 👍

[@Bedimcode]

Thank's my friend regards

[@realcricket2317]

Nice video. Keep going

[@Bedimcode]

Thanks friend. Equal Successes.

[@abhinavg916]

Awesome 😍

[@Bedimcode]

Thanks friend. Greetings and success.

[@husanboy_us]

which vs-code theme do you use?

[@programx2161]

It will be great if you can explain the steps You're doing on the video. Maybe the key part of every code You're writing.

[@Bedimcode]

At the moment I can not explain friend.

[@zakidzz]

it would be bettze if you talk in thoes vedio by thr way its cool

[@eveohagan1230]

is there a way to save the sorted list?

[@Bedimcode]

Sure friend just add this code in the javascript. You have to add below dragClass store: { // We keep the order of the list set: (sortable) => { const order = sortable.toArray () localStorage.setItem (sortable.options.group.name, order.join ('|')) }, // We get the order of the list get: (sortable) => { const order = localStorage.getItem (sortable.options.group.name) return order? order.split ('|'): [] } }

[@krypton7262]

It looks like very cool🔥🔥 But where we use it?)

[@boundless-sher]

Limit is your imagination : )

[@krypton7262]

@@boundless-sher as you say

[@Bedimcode]

It already depends on one where you use it

[@julio5434]

Sortable-chosen is jQuery not JavaScript

[@saboorhamedi5413]

How to save the location after changing it ?

[@Bedimcode]

Add this code in the main.js file under the property dragClass: "sortable-drag", store: { // We keep the order of the list set: (sortable) => { const order = sortable.toArray () localStorage.setItem (sortable.options.group.name, order.join ('|')) }, // We get the order of the list get: (sortable) => { const order = localStorage.getItem (sortable.options.group.name) return order? order.split ('|'): [] } }

[@septiananugrah464]

How to get data after it's sorted ?

[@Bedimcode]

Sortable js, also has a LocalStorage function, where it saves the order, even when it reloads the page, you can check it in its documentation.

[@wasifkhan8135]

sir kindly make landing page....animate on scroll

[@Bedimcode]

Sure friend, I am making a website with scrolling animations and much more.

[@wasifkhan8135]

@@Bedimcode thanks

[@vicodev444]

@Bedimcode #Bedimcode nice video, I subscribed and left a like. I would like the position of the items to remain in the place where I moved it, perhaps via local storage. Could you tell me how I can do it? Thank you in advance for reading my message. PS: If you could send me the piece of code. I thank you once again

[@Bedimcode]

The code is available on GitHub, you can download it and use it, greetings.

[@beticohernandez9536]

Ok