Skip to content
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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Drag a div from one div to another #8

Open
dennyabrain opened this issue Nov 28, 2024 · 10 comments
Open

Drag a div from one div to another #8

dennyabrain opened this issue Nov 28, 2024 · 10 comments

Comments

@dennyabrain
Copy link
Contributor

dennyabrain commented Nov 28, 2024 •
edited
Loading

Overview

Create 5 divs called "category-a", "category-b", "category-c", "category-d", "category-e"
At first your div is inside category-a. Then the user should be able to click on that div and move it into another div. Anytime your dragged div is on top of another div, the underlying div should change its background color. When the drag stops, if your div is within the boundary of any of the 5 divs, it should be moved inside the category div.

Hint

  • When the dragging stops, to move the the div inside another div, you might need to use the append function.
  • To remove div from its original div, you might need to use the remove function.

Illustration

PXL_20241128_044243789~2.jpg
@Preetiaarya
Copy link
Contributor

Preetiaarya commented Nov 28, 2024 •
edited
Loading

Our project plane:
---------------------------------------Drag-div---------------------------------------------------
We will use DOM API in our project.
1.(i) getElementById()
(ii) createElement()
(iii) appendChild()
(iv) textContent()
(v) addEventListener (a)mousedown (b) mouseup (c) mousemove
2. We used these DOM API's signature:
(i) document.createElement
(ii) parent.appendChild(child)
(iii) element.textContent = "..."
3.use mouse event listener mousemove, mouseup, mousedown
4.parameters: div, p
---------------------------------5 Category-div-----------------------------------
5.we used these API's signature to create div , para and append it
let div = document.createElement("div");
let p = document.createElement("p");
div.append(p); //used parameters div,p
---------------------------------Condition--------------------------------------
6.we used these method:
getBoundoryClientRect();
7.function:

    // Get the bounding rectangles of both elements
    const rect1 = element1.getBoundingClientRect();
    const rect2 = element2.getBoundingClientRect();

    // Check if the elements overlap
    const isOverlap = !(rect1.right < rect2.left ||
                        rect1.left > rect2.right ||
                        rect1.bottom < rect2.top ||
                        rect1.top > rect2.bottom);

    return isOverlap;
}```

@dennyabrain
Copy link
Contributor Author

Which function will you use to change the background color of the container div?

@dennyabrain
Copy link
Contributor Author

The plan looks good. You can go ahead.

@Preetiaarya
Copy link
Contributor

Thanks! after checking overlap we will use if condition to change background color of container div

@Mahimahto
Copy link
Contributor

Mahimahto@97c847e

Highlighted the category div with a yellow background when an overlap is detected.

@dennyabrain
Copy link
Contributor Author

@Mahimahto Have reviewed your code and added a comment. I ran your code and it looks great!

One thing is missing. I would like you to move the dragging div INTO the container div. For example before you start dragging the DOM structure will look like this

<body>
    <h1>Draging-Box</h1>
    <div id="dragingDiv" style="width: 100px; height: 100px; position: absolute; left: 665px; top: 261px;"></div>
    <div class="category" id="category-a" style="">category-a</div>
    <div class="category" id="category-b" style="">category-b</div>
    <div class="category" id="category-c" style="background-color: yellow;">category-c</div>
    <div class="category" id="category-d" style="">category-d</div>
    <div class="category" id="category-e" style="">category-e</div>
</body>

Now if you drag the dragging div into category-e, the DOM should look like

<body>
    <h1>Draging-Box</h1>
    <div class="category" id="category-a" style="">category-a</div>
    <div class="category" id="category-b" style="">category-b</div>
    <div class="category" id="category-c" style="background-color: yellow;">category-c</div>
    <div class="category" id="category-d" style="">category-d</div>
    <div class="category" id="category-e" style="">category-e
        <div id="dragingDiv" style="width: 100px; height: 100px; position: absolute; left: 665px; top: 261px;"></div>
    </div>
</body>

I hope this makes sense.

@Mahimahto
Copy link
Contributor

Mahimahto@4be8591

Update drag-and-drop behavior to correctly position dragged element at mouseup

@dennyabrain
Copy link
Contributor Author

@maanasb01 @Mahimahto's code is ready to merge. I have run the code locally so feel free to merge her PR.

@Mahimahto
Copy link
Contributor

#9
my PR url

@Mahimahto
Copy link
Contributor

Mahimahto@bfc04ad

Add drag-and-drop functionality for categorizing items

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@dennyabrain @Mahimahto @Preetiaarya