diff --git a/README.md b/README.md index b5ac8c7..b0eaa79 100644 --- a/README.md +++ b/README.md @@ -573,6 +573,17 @@ In order to run this project you need: +
  • +
    +Drag and Drop App +

    This is a simple drag-and-drop app where users can move items from one list to another. It's a basic implementation of a task manager or an image gallery where users can organize their items by dragging and dropping.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/DragAndDrop/index.html b/Source-Code/DragAndDrop/index.html new file mode 100644 index 0000000..c49e5d6 --- /dev/null +++ b/Source-Code/DragAndDrop/index.html @@ -0,0 +1,32 @@ + + + + + + Drag and Drop App + + + +
    +
    +

    Task List 1

    + +
    + +
    +

    Task List 2

    + +
    +
    + + + + diff --git a/Source-Code/DragAndDrop/script.js b/Source-Code/DragAndDrop/script.js new file mode 100644 index 0000000..0cee99d --- /dev/null +++ b/Source-Code/DragAndDrop/script.js @@ -0,0 +1,54 @@ +// Get all the lists and list items +const lists = document.querySelectorAll('.list'); +const items = document.querySelectorAll('li'); + +// Drag start function to add the dragging class +function dragStart(e) { + e.target.classList.add('dragging'); +} + +// Drag end function to remove the dragging class +function dragEnd(e) { + e.target.classList.remove('dragging'); +} + +// Drag over function to allow dropping on the list +function dragOver(e) { + e.preventDefault(); +} + +// Drag enter function to style the list when an item is dragged over +function dragEnter(e) { + e.target.classList.add('over'); +} + +// Drag leave function to remove the styling when the item leaves the list +function dragLeave(e) { + e.target.classList.remove('over'); +} + +// Drop function to move the dragged item into the list +function drop(e) { + e.preventDefault(); + const draggedItem = document.querySelector('.dragging'); + e.target.classList.remove('over'); + + // If the target is a list, append the dragged item to it + if (e.target.classList.contains('list')) { + e.target.querySelector('ul').appendChild(draggedItem); + } +} + +// Add event listeners for dragging items +items.forEach((item) => { + item.addEventListener('dragstart', dragStart); + item.addEventListener('dragend', dragEnd); +}); + +// Add event listeners for the lists to accept dropped items +lists.forEach((list) => { + list.addEventListener('dragover', dragOver); + list.addEventListener('dragenter', dragEnter); + list.addEventListener('dragleave', dragLeave); + list.addEventListener('drop', drop); +}); diff --git a/Source-Code/DragAndDrop/style.css b/Source-Code/DragAndDrop/style.css new file mode 100644 index 0000000..b862af5 --- /dev/null +++ b/Source-Code/DragAndDrop/style.css @@ -0,0 +1,60 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f0f0f0; +} + +.container { + display: flex; + gap: 20px; +} + +.list { + background-color: #fff; + border-radius: 8px; + padding: 20px; + width: 200px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +h2 { + text-align: center; + margin-bottom: 20px; +} + +ul { + list-style-type: none; +} + +li { + padding: 10px; + margin: 5px 0; + background-color: #4caf50; + color: white; + border-radius: 4px; + cursor: grab; + transition: background-color 0.3s ease; +} + +li:hover { + background-color: #45a049; +} + +/* When dragging an item */ +li.dragging { + opacity: 0.5; +} + +.list.over { + border: 2px dashed #4caf50; + background-color: #f9f9f9; +}