https://github.com/flowforfrank/drag-n-drop

📌 Drag and Drop Kanban board created natively with JavaScript
https://github.com/flowforfrank/drag-n-drop

drag drag-and-drop html javascript tutorial webtips

Last synced: about 1 month ago
JSON representation

📌 Drag and Drop Kanban board created natively with JavaScript

• Host: GitHub
• URL: https://github.com/flowforfrank/drag-n-drop
• Owner: flowforfrank
• Created: 2020-05-11T16:03:34.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-02-25T17:35:18.000Z (almost 4 years ago)
• Last Synced: 2023-10-20T19:52:11.401Z (about 1 year ago)
• Topics: drag, drag-and-drop, html, javascript, tutorial, webtips
• Language: HTML
• Homepage: https://webtips.dev
• Size: 47.9 KB
• Stars: 35
• Watchers: 0
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


    



You can read the written tutorial about the implementation on webtips.dev 📌


---

## 🐞 Bugfixes

**❓ Why is the scale effect doesn't work after the first drag?**

- This happens because the HTML of the column is updated. Since the event listeners are on the `.card`

  inside the `.column`, these will be detached from the DOM, after the first HTML update. This means they won't be triggered anymore, therefore they won't get the `.dragging` class which applies the scale effect. To fix this, all you have to do is delegate the event listener from the document. The same is true for the `dragend` event.

  ```JavaScript

  document.addEventListener('dragstart', e => {

    if (e.target.className.includes('card')) {

      dragStart(e.target);

    }

  });

  ```