Cómo habilitar la funcionalidad de arrastrar y soltar en Django

27 Jul, 2023 Programación 0

Estoy buscando usar una función de arrastrar y soltar para actualizar una tabla en mi modelo de Django.

Necesito poder arrastrar elementos (una lista de objetos de modelo) entre 3 cestas y actualizar el tipo de cesta del elemento en el modelo. Mi modelo contiene elementos de comida y el estado de estos elementos. Entonces los nombres de comida serán los elementos arrastrados y las 3 cestas serán el estado de comida: ‘no tengo’, ‘tengo’, ‘necesito comprar’. Exactamente como en este ejemplo: https://www.javascripttutorial.net/sample/webapis/drag-n-drop-basics/.

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

<head>
    <style>
        #div1, #div2, #div3 {
          float: left;
          width: 100px;
          height: 35px;
          margin: 10px;
          padding: 10px;
          border: 1px solid black;
        }
        </style>
    <script>
        function allowDrop(ev) {
          ev.preventDefault();
        }

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

        function drop(ev) {
          ev.preventDefault();
          var data = ev.dataTransfer.getData("text");
          ev.target.appendChild(document.getElementById(data));
        }
        </script>
</head>

<body>
    <h2>Drag and Drop</h2>
    <p>Arrastra los elementos de un lado a otro entre los tres elementos de div.</p>
    {% for row in all_food %}
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        {% if row.status_type == 'tengo' %}
        <ul>
        <li><a href="/" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">{{row}}</a>
        </li></ul>
        {% endif %}
    </div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
{% endfor %}

</body>
</html>

El código anterior muestra 33 cajas con los elementos del bucle for dispersos entre las cajas.

Principalmente uso Python y no tengo mucha experiencia trabajando con código front-end. ¿Qué puedo probar a continuación?

davy.ai

July 27, 2023 at 7:23 pm

Para implementar una funcionalidad de arrastrar y soltar para actualizar una tabla en Django, puedes seguir los siguientes pasos:

Agrega jQuery y jQuery UI a tu archivo HTML utilizando enlaces CDN.
Configura tu vista Django para actualizar el modelo en función de los eventos de arrastrar y soltar.
Modifica tu archivo HTML para utilizar las funciones “draggable” y “droppable” de jQuery UI y habilitar la funcionalidad de arrastrar y soltar para tus elementos.
Implementa el evento “drop” para llamar a una solicitud AJAX y actualizar el estado del elemento en el modelo de Django.

Aquí tienes un ejemplo de cómo podría verse tu archivo HTML modificado:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de Arrastrar y Soltar</title>
  <!-- Enlaces CDN de jQuery y jQuery UI -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <style>
    .basket {
      float: left;
      width: 100px;
      height: 200px;
      margin: 10px;
      padding: 10px;
      border: 1px solid black;
    }

    .item {
      margin: 5px;
      padding: 5px;
      border: 1px solid black;
      background-color: #fff;
      display: inline-block;
    }
  </style>
  <script>
    $(function() {
      // Hacer que los elementos sean arrastrables
      $(".item").draggable({
        revert: true // regresar si no se sueltan en una canasta
      });

      // Hacer que las canastas sean soltables
      $(".basket").droppable({
        drop: function(event, ui) {
          // Obtener los datos del elemento arrastrado
          var data = ui.draggable.data("id");

          // Obtener el ID de la canasta en la que se soltó el elemento
          var basket_id = $(this).data("id");

          // Enviar una solicitud AJAX para actualizar el estado del elemento en el modelo de Django
          $.ajax({
            url: "/update-item-status/",
            type: "POST",
            data: {
              "item_id": data,
              "basket_id": basket_id,
              csrfmiddlewaretoken: "{{ csrf_token }}"
            },
            success: function(response) {
              // Actualizar el estado del elemento si la solicitud fue exitosa
              if (response.success) {
                console.log("Se ha actualizado el estado del elemento.");
              } else {
                console.log("Error al actualizar el estado del elemento.");
              }
            }
          });
        }
      });
    });
  </script>
</head>

<body>
  <h1>Mis Canastas de Comida</h1>
  <div class="basket" data-id="1">
    No Tengo
  </div>
  <div class="basket" data-id="2">
    Tengo
  </div>
  <div class="basket" data-id="3">
    Necesito Comprar
  </div>

  {% for item in items %}
  <div class="item" data-id="{{ item.id }}">
    {{ item.name }}
    Estado: {{ item.status }}
  </div>
  {% endfor %}

  {% csrf_token %}
</body>

</html>

En este ejemplo, hemos agregado los enlaces CDN de jQuery y jQuery UI al encabezado de nuestro archivo HTML, así como algunos estilos CSS para definir la apariencia de nuestras canastas y elementos.

Luego, utilizamos jQuery para hacer que cada elemento en nuestro modelo de Django sea arrastrable utilizando la función .draggable(). También hacemos que cada canasta sea soltable utilizando la función .droppable() y definimos el evento drop para manejar la actualización del estado del elemento en el modelo de Django.

En nuestro evento drop, primero obtenemos los datos del elemento arrastrado y el ID de la canasta en la que se soltó. Luego, enviamos una solicitud AJAX a nuestra vista de Django en /update-item-status/, pasando el ID del elemento y el ID de la canasta como datos. También incluimos la etiqueta de plantilla {% csrf_token %} de Django para protegernos contra ataques CSRF.

Finalmente, en nuestra vista de Django, deberemos definir una función para manejar la solicitud AJAX y actualizar el modelo en función de la información enviada.

es.davy.ai

¿Tienes una pregunta?

Cómo habilitar la funcionalidad de arrastrar y soltar en Django

Answer

davy.ai