Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

50Projects-HTML-CSS-JavaScript : Drag and Drop App#54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
tajulafreen merged 2 commits intomainfromDrag_and_Drop
Dec 25, 2024

Conversation

tajulafreen
Copy link
Owner

Title: Add Drag and Drop Functionality for Task Lists

Description:

This PR adds a drag-and-drop feature to a simple task list application, where users can move items between two lists. The drag-and-drop functionality is implemented using the native HTML5 Drag and Drop API, and the application is styled using CSS for better user interaction.

Changes Made:

  • Created two task lists with draggable items inside each list.
  • Included basic structure for task list containers.
  • Styled the task lists with Flexbox layout to display side-by-side.
  • Added hover and dragging effects on list items for better visual feedback.
  • Styled lists with a dashed border when an item is dragged over them.
  • Implemented the drag-and-drop functionality using event listeners (dragstart, dragend, dragover, dragenter, dragleave, drop).
  • Added a class (dragging) to items while they are being dragged.
  • Allowed items to be dropped into a different list, updating the UI accordingly.

Features:

  • Users can drag items from one list to another.
  • Items are visually represented with a background change on hover and a dashed border when a valid drop target is hovered.
  • Simple, interactive task list with smooth drag-and-drop behavior.

@tajulafreentajulafreen merged commit59c14c5 intomainDec 25, 2024
5 checks passed
@tajulafreentajulafreen deleted the Drag_and_Drop branchDecember 25, 2024 21:10
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

1 participant
@tajulafreen

[8]ページ先頭

©2009-2025 Movatter.jp