drag and drop ordenado no se ordena

sacris1 · #1 (**permalink**) 11/01/2023, 13:50

Buenas noches estoy programando un drag and drop con un container div y 3 divs mas que representan las tareas.

Quiero que si se mueve una tarea que se coloque en la posición que ha puesto el usuario.

Lo que se hacer es que me la ponga al final pero esto no es exactamente lo que necesito.

Adjunto el código para que veais lo que he hecho.

Muchas gracias,

Código 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>Document</title>
</head>

<style>
    .MainContainer {
        width: 1000px;
        height: 600px;
        background-color: #78881231;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .Container {
        width: 300px;
        height: 600px;
        background-color: #98ec22;
        border-color: red;
        border-style: solid;
        float: left;
    }

    .Task {
        width: 50%;
        height: 200px;
        background-color: cornflowerblue;
        margin: 3px;
    }

    .Task:hover{
        background-color: aqua;
    }
    .Task2 {
        width: 50%;
        height: 200px;
        background-color: rgb(237, 100, 184);
        margin: 3px;
    }
</style>

<script>
    //container
    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        let destino = ev.target.classList.value;
        t = document.getElementsByClassName("Container")
        if (destino.includes("Tas")) {
            ev.target.parentElement.appendChild(document.getElementById(data));
        } else {
            console.log("dentro otra task");
            ev.target.appendChild(document.getElementById(data));
        }
    }

    function allowDrop(ev) {
        ev.preventDefault();
    }
    //objecte que es mou
    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }
    function dragLeave(e) {
        console.log(e);
    }
    function dragenter(e) {

    }

</script>
<body>
    <div class="MainContainer">
        <div class="Container" id="Container1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
        <div class="Container" id="Container2" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div class="Task" id="t1" ondragenter="dragenter(event)" dropzone="" ondragstart="drag(event)"  draggable="true"></div>
            <div class="Task" id="t2" ondragenter="dragenter(event)" dropzone="" ondragstart="drag(event)"  draggable="true"></div>
            <div class="Task2" id="t3" ondragenter="dragenter(event)" dropzone="" ondragstart="drag(event)"  draggable="true"></div>
        </div>
        <div class="Container" id="Container3" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div class="Task2" id="t2" ondragstart="drag(event)" draggable="true"></div>
        </div>
    </div>
</body>

</html>