how-to-create-native-drag-and-drop-functionality-in-javascript

[utterances-bot]

How to Create Native Drag and Drop Functionality in JavaScript - Weekly Webtips

Drag and drop functionality is a common feature. It creates a more intuitive user flow. Learn how you can implement it in JavaScript

http://localhost:1234/how-to-create-native-drag-and-drop-functionality-in-javascript

[flowforfrank]

Ayyaz • 2 months ago Thanks for great article.

By the way If you want to learn how to create sortable drag and drop todo list with vanilla javascript then you can learn from this youtube video:

https://www.youtube.com/watch?v=EqHwUsdOg8o&feature=emb_title

[flowforfrank]

Teddy • 4 months ago • edited One other comment on this - is there a reason some of your events are called via the HTML tag vs. some are called via the addEventListener() function?

<div class="column column-todo" ondrop="drop(event)" ondragover="allowDrop(event)">

vs.

Array.from(document.querySelectorAll('.card')).forEach(card => {
  card.addEventListener('dragstart', dragStart);
  card.addEventListener('dragend', dragEnd);
});```

[flowforfrank]

Teddy • 4 months ago I believe your drop() function also needs to call event.preventDefault() otherwise the page will refresh when you drop the box in a new column

[flowforfrank]

Teddy • 4 months ago I believe your drop() function also needs to call event.preventDefault() otherwise the page will refresh when you drop the box in a new column

Hey Teddy! This is handled in the allowDrop function, which is attached to ondragover. Note that if you add it to the drop function, you also prevent the drop event from happening.

[flowforfrank]

Teddy • 4 months ago I believe your drop() function also needs to call event.preventDefault() otherwise the page will refresh when you drop the box in a new column

Hey Teddy! This is handled in the allowDrop function, which is attached to ondragover. Note that if you add it to the drop function, you also prevent the drop event from happening.

Teddy ↩️ Ferenc Almasi • 4 months ago • edited

Check out this quick demo where I have the preventDefault() call in drop(). It seems to work like my original comment mentioned.

If I remove it, the page refreshes on me "dropping" the box. Maybe there's something different going on here though?

[flowforfrank]

Teddy • 4 months ago I believe your drop() function also needs to call event.preventDefault() otherwise the page will refresh when you drop the box in a new column

Hey Teddy! This is handled in the allowDrop function, which is attached to ondragover. Note that if you add it to the drop function, you also prevent the drop event from happening.

Teddy ↩️ Ferenc Almasi • 4 months ago • edited

Check out this quick demo where I have the preventDefault() call in drop(). It seems to work like my original comment mentioned.

If I remove it, the page refreshes on me "dropping" the box. Maybe there's something different going on here though?

This is indeed the behavior in Firefox, I was using Chrome. It seems like the two browsers handle the drop event differently. To get around this, you should definitely add a preventDefault, just like in the official docs. Kudos for pointing this out! I will update the GitHub repo accordingly.

[H3llfyr3]

Very nice tutorial. How would one go about saving the location of the cards so the next time the webpage is loaded it is not reset?

[flowforfrank]

Very nice tutorial. How would one go about saving the location of the cards so the next time the webpage is loaded it is not reset?

You would need some form of data storage in place (whether it be local storage or an actual database) where you could store information about the cards. When the application loads, this information can be retrieved and used to display the cards in their correct order, eg.:

<!-- Generating the following HTML -->
<ul>
    <li>Todo #2</li>
    <li>Todo #3</li>
    <li>Todo #1</li>
</ul>

From the following data:

{
    "todos": [
        "Todo #2",
        "Todo #3",
        "Todo #1",
    ]
}