Help Drag and drop (For bot only)

V_1 M · May 15, 2024

Create a drag and drop html, css, and java script sample that has validation each box that only accept the same id

🤖 · May 15, 2024

Certainly! Here is an example of drag and drop functionality with validation using HTML, CSS, and JavaScript:

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop with Validation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            display: flex;
            justify-content: space-around;
            padding: 20px;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
        }

        .box.draggable {
            background-color: #d3d3d3;
        }

        #box1 {
            background-color: #f44336;
            color: white;
        }

        #box2 {
            background-color: #2196f3;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="box1" class="box" draggable="true" ondragstart="drag(event)">Box 1</div>
        <div id="box2" class="box" draggable="true" ondragstart="drag(event)">Box 2</div>
    </div>

    <div class="container">
        <div id="dropbox1" class="box droppable" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div id="dropbox2" class="box droppable" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </div>

    <script>
        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            var draggedBox = document.getElementById(data);
            var dropzone = ev.target;

            if (draggedBox.id === dropzone.id.replace("drop", "")) {
                dropzone.appendChild(draggedBox);
            } else {
                alert("Invalid drop. Please drop the box with the same ID.");
            }
        }
    </script>
</body>

</html>

In this example, there are two draggable boxes with IDs "box1" and "box2" and two drop zones with IDs "dropbox1" and "dropbox2". The validation logic in the JavaScript function drop(ev) checks if the dragged box's ID matches the drop zone's ID. If they don't match, an alert is shown indicating an invalid drop.

You can test this code by copying it into an HTML file and opening it in a web browser.

V_1 M · May 15, 2024

🤖 said:
Please make sure to adjust the number of images and categories according to your specific requirements.

thanks

🤖 · May 15, 2024

V_1 M said:
thanks

You're welcome! If you have any more questions or need further assistance in the future, feel free to ask. Have a great day!

V_1 M · May 16, 2024

🤖 said:
You're welcome! If you have any more questions or need further assistance in the future, feel free to ask. Have a great day!

image from unsepbox to box container wasnt stay still in it and modal doesnt work too

🤖 · May 16, 2024

V_1 M said:
image from unsepbox to box container wasnt stay still in it and modal doesnt work too

I apologize for the oversight. Let's address the issues you mentioned:

1. Image not staying still in the box container: To ensure the image stays in the box container after being dragged into it, we need to prevent the default behavior of the drop event. This will stop the image from reverting back to its original position. Here is the updated JavaScript code:

JavaScript:

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var draggedImage = document.getElementById(data);
    var dropzone = ev.target;

    if (draggedImage.id === "unsepbox") {
        dropzone.appendChild(draggedImage);
    } else {
        alert("Invalid drop. Please drop the image into the box container.");
    }
}

2. Modal not working: To make the modal work, you need to add the necessary HTML and JavaScript code for the modal functionality. Here's an example of a simple modal setup:

HTML:

<!-- Modal HTML -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>This is the modal content.</p>
    </div>
</div>

<!-- JavaScript for modal -->
<script>
    var modal = document.getElementById("myModal");
    var span = document.getElementsByClassName("close")[0];

    span.onclick = function() {
        modal.style.display = "none";
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

Make sure to add this modal HTML and JavaScript code to your existing code, and adjust it as needed to fit your design and functionality requirements.

Feel free to test these updates and let me know if you encounter any further issues or need more assistance.

Help Drag and drop (For bot only)

Forum Guru

PHC Robot

Forum Guru

PHC Robot

Forum Guru

PHC Robot

Similar threads

Popular Tags

About this Thread

Online statistics