prasannad02 / drag-and-drop Goto Github PK

Drag and Drop

Prasanna -Drag and Drop Site is a web application that enables users to easily drag and drop list items between two containers. It provides a user-friendly interface for organizing and reordering items. The site features a responsive design with stylish containers and visually appealing list items.

• Prasanna

Live Demo:

https://prasannad02.github.io/Drag-and-Drop/

To use the Prasanna's Drag & Drop web page, follow these steps:

1. Open the HTML file in a web browser.

2. You will see two boxes, one on the left and one on the right.

3. The left box contains a list of items that can be dragged and dropped to the right box.

4. To drag an item, simply click and hold on it, and then move the mouse to the right box.

5. When the item is over the right box, release the mouse button to drop it.

6. You can drag and drop any of the items in the left box to the right box.

7. To remove an item from the right box, simply drag it back to the left box.

8. You can also add your own items to the left box by creating new HTML elements with the draggable="true" attribute.

9. The draggable="true" attribute tells the browser that the element can be dragged and dropped.

10. Once you have added your own items to the left box, you can drag and drop them to the right box just like the other items.

Here are some additional tips for using the Prasanna Drag & Drop web page:

• You can use the dragover and drop events to customize the behavior of the drag and drop functionality.

• You can also use the draggable attribute to specify which elements can be dragged and dropped.

• The draggable attribute can accept a boolean value, or a list of elements that can be dragged and dropped.

• For more information on the drag and drop API, please see the MDN documentation:

  https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API.

• Drag and drop functionality for list items.

• Images and text are grouped together and dragged as a single unit.

• Prevents dragging images separately from the list items.

• Uses the "Poppins" font from Google Fonts.

• Responsive layout with two containers (left and right) separated by dashed borders.

• Styling with a blue background for list items and a white background for the containers.

Contributions are always welcome!

If you have any suggestions, improvements, or bug fixes, feel free to submit a pull request. Please ensure that your contributions align with the overall design and goals of the website.

For any questions or inquiries, please feel free to reach out.

Prasanna :

Thank you for visiting the page!