Foros del Web » Programando para Internet » Javascript »

drag and drop ordenado no se ordena

Estas en el tema de drag and drop ordenado no se ordena en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/01/2023, 13:50
 
Fecha de Ingreso: julio-2008
Mensajes: 155
Antigüedad: 14 años, 6 meses
Puntos: 1
drag and drop ordenado no se ordena

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>








La zona horaria es GMT -6. Ahora son las 19:47.