SortableJS obtiene orden de la lista anidada

2
Basti G. 2019-06-12 23:09.

Intento obtener el orden de una lista anidada que se puede ordenar con SortableJS . Mi lista se ve así:

<div id="nestedDemo" class="list-group col nested-sortable">
    <div class="list-group-item" data-id="1">Titel 1</div>
    <div class="list-group-item" data-id="2">Titel 2</div>
    <div class="list-group-item" data-id="3">Titel3
        <div class="list-group nested-sortable">
            <div class="list-group-item" data-id="4">Titel 4</div>
            <div class="list-group-item" data-id="5">Titel 5</div>
            <div class="list-group-item" data-id="6">Titel 6</div>
        </div>
    </div>
    <div class="list-group-item" data-id="7">Titel 7</div>
    <div class="list-group-item" data-id="8">Titel 8</div>
    <div class="list-group-item" data-id="9">Titel 9</div>
    <div class="list-group-item" data-id="10">Titel10
        <div class="list-group nested-sortable">
            <div class="list-group-item" data-id="11">Titel 11</div>
            <div class="list-group-item" data-id="12">Titel 12</div>
        </div>
    </div>
</div>

y mi código javascript:

<script>
    $(document).ready(function() { var nestedSortables = $(".nested-sortable");

        // Loop through each nested sortable element
        for (var i = 0; i < nestedSortables.length; i++) {
            new Sortable(nestedSortables[i], {
                group: 'nested',
                animation: 150,
                fallbackOnBody: true,
                swapThreshold: 0.65,
                onSort: function (e) {
                    var items = e.to.children;
                    var result = [];
                    for (var i = 0; i < items.length; i++) {
                        result.push($(items[i]).data('id')); } $('#standard_order').val(result);
                }
            });
        }
    });
</script>

Mi objetivo es obtener el pedido con cada cambio de la lista y almacenar el pedido en un campo de entrada con la identificación standard_order. Hago esto porque tengo un botón de envío para almacenar el pedido en una base de datos. Mi problema es que cuando cambio el orden, no se almacena la lista completa en mi campo de entrada, sino solo la sublista en la que eliminé el elemento actual.

Intenté usar una lista, pero la lista anidada no funciona.

¿Puedes ayudarme a resolver mi problema?

Editar:

Creo que tengo una solución general.

var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));

        var sortables = [];

        // Loop through each nested sortable element
        for (var i = 0; i < nestedSortables.length; i++) {
            sortables[i] = new Sortable(nestedSortables[i], {
                group: 'nested',
                animation: 150,
                fallbackOnBody: true,
                swapThreshold: 0.65
            });
        }

        $('#sendButton').click(function () {
            for(var y = 0; y < sortables.length; y++) {
                var order = sortables[y].toArray();
                console.log(order);
            }
        });

Esto me da el orden de cada divcon la clase nested-sortablecuando hago clic en el botón con la identificación sendButton. Por ejemplo, la salida de la consola se ve así:

(7) ["Titel 1", "Titel 2", "Titel 3", "Titel 7", "Titel 8", "Titel 8", "Titel 10"]
(3) ["Titel 4", "Titel 5", "Titel 6"]
(2) ["Titel 11", "Titel 12"]

Pero no sé cómo puedo obtener la estructura anidada jerárquica ... No puedo ver cuál es el padre del div.

2 answers

9
Owen M 2019-06-14 05:42.

Hice una demostración que muestra cómo hacer esto muy fácilmente: https://jsbin.com/reyecop/edit?js,output

La parte importante (aplicada a la demostración anidada en la página de inicio de SortableJS):

const nestedQuery = '.nested-sortable';
const identifier = 'sortableId';
const root = document.getElementById('nestedDemo');
function serialize(sortable) {
  var serialized = [];
  var children = [].slice.call(sortable.children);
  for (var i in children) {
    var nested = children[i].querySelector(nestedQuery);
    serialized.push({
      id: children[i].dataset[identifier],
      children: nested ? serialize(nested) : []
    });
  }
  return serialized
}

console.log(serialize(root))
0
Steve 2019-06-13 08:37.

Termina con 3 listas ordenables separadas y cualquier tipo puede desencadenar los otros eventos onSort y, dado que todos escriben en el mismo campo #standard_order, solo contendrá los elementos de la última lista que escribieron en el campo standard_order. Simplemente agregue un archivo console.log para ver cuándo y qué es visible en el evento.

$("#standard_order").val(result);
console.log(result);

si quieres obtener todos los artículos, tendrás que agarrarlos

var items = $("#nestedDemo .list-group-item"); 
.. same loop logic
$("#standard_order").val(result);

Related questions

MORE COOL STUFF

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de HGTV, Christina Hall, revela que le diagnosticaron envenenamiento por mercurio y plomo, probablemente debido a su trabajo como manipuladora de casas.

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

Recientemente salió a la luz un informe policial que acusa a la estrella de 'Love Is Blind', Brennon, de violencia doméstica. Ahora, Brennon ha respondido a los reclamos.

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Conozca cómo Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia mientras organizaba la primera celebración de Acción de Gracias desde que murió su madre, Naomi Judd.

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Descubra por qué un destacado experto en lenguaje corporal cree que es fácil trazar "tales paralelismos" entre la princesa Kate Middleton y la princesa Diana.

Los láseres arrojan luz sobre por qué necesita cerrar la tapa antes de descargar

Los láseres arrojan luz sobre por qué necesita cerrar la tapa antes de descargar

Los inodoros arrojan columnas de aerosol invisibles con cada descarga. ¿Como sabemos? La prueba fue capturada por láseres de alta potencia.

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

¿Caduca el repelente de insectos?

¿Caduca el repelente de insectos?

¿Sigue siendo efectivo ese lote de repelente de insectos que te quedó del verano pasado? Si es así, ¿por cuánto tiempo?

Tony Stewart enloquece al presidente de NASCAR por no estar en la pista

Tony Stewart enloquece al presidente de NASCAR por no estar en la pista

Tony Stewart señaló una falla importante con NASCAR en una entrevista con Dave Moody en Sirius / XM Radio: el presidente y director ejecutivo de la serie, Brian France, simplemente no está en la pista. Eso podría explicar algunas cosas.

El Chevrolet Bolt eléctrico: esto es antes de que se suponga que lo veas

El Chevrolet Bolt eléctrico: esto es antes de que se suponga que lo veas

Estábamos esperando que el nuevo Chevrolet Bolt totalmente eléctrico se presentara en el CES esta semana, y finalmente tenemos una idea bastante clara de lo que traerá la versión de producción. Bolt más cercano a la producción antes de CES, publicando este video hoy antes de la revelación oficial.

Diez cosas que te emocionan en 2016

Diez cosas que te emocionan en 2016

Para los autos, 2015 fue bastante bueno, pero 2016 puede terminar aún más salvaje. Volvo ya nos ha sorprendido con su nuevo sedán S90 y el SUV XC90.

Ponle una tapa. En realidad, ponle una tapa a todo. Consigue 12 tapas de cocina elásticas de silicona por $14. [Exclusivo]

Ponle una tapa. En realidad, ponle una tapa a todo. Consigue 12 tapas de cocina elásticas de silicona por $14. [Exclusivo]

Tapas elásticas de silicona de Tomorrow's Kitchen, paquete de 12 | $14 | Amazonas | Código promocional 20OFFKINJALids son básicamente los calcetines de la cocina; siempre perdiéndose, dejando contenedores huérfanos que nunca podrán volver a cerrarse. Pero, ¿y si sus tapas pudieran estirarse y adaptarse a todos los recipientes, ollas, sartenes e incluso frutas en rodajas grandes que sobran? Nunca más tendrás que preocuparte por perder esa tapa tan específica.

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

El equipo está a la espera de las medallas que ganó en los Juegos Olímpicos de Invierno de 2022 en Beijing, ya que se está resolviendo un caso de dopaje que involucra a la patinadora artística rusa Kamila Valieva.

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Miles de compradores de Amazon recomiendan la funda de almohada de seda Mulberry, y está a la venta en este momento. La funda de almohada de seda viene en varios colores y ayuda a mantener el cabello suave y la piel clara. Compre las fundas de almohada de seda mientras tienen hasta un 46 por ciento de descuento en Amazon

Se busca al corredor de los Bengals Joe Mixon por orden de arresto emitida por presuntamente apuntar con un arma de fuego a una mujer

Se busca al corredor de los Bengals Joe Mixon por orden de arresto emitida por presuntamente apuntar con un arma de fuego a una mujer

El jueves se presentó una denuncia de delito menor amenazante agravado contra Joe Mixon.

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

El Departamento de Policía de Lafayette comenzó a investigar a un profesor de la Universidad de Purdue en diciembre después de recibir varias denuncias de un "hombre sospechoso que se acercaba a una mujer".

Concept Drift: el mundo está cambiando demasiado rápido para la IA

Concept Drift: el mundo está cambiando demasiado rápido para la IA

Al igual que el mundo que nos rodea, el lenguaje siempre está cambiando. Mientras que en eras anteriores los cambios en el idioma ocurrían durante años o incluso décadas, ahora pueden ocurrir en cuestión de días o incluso horas.

India me está pateando el culo

India me está pateando el culo

Estoy de vuelta por primera vez en seis años. No puedo decirte cuánto tiempo he estado esperando esto.

ℝ

“And a river went out of Eden to water the garden, and from thence it was parted and became into four heads” Genesis 2:10. ? The heart is located in the middle of the thoracic cavity, pointing eastward.

¿Merrick Garland le ha fallado a Estados Unidos?

Es más de la mitad de la presidencia de Biden. ¿Qué está esperando Merrick Garland?

¿Merrick Garland le ha fallado a Estados Unidos?

Creo, un poco tarde en la vida, en dar oportunidades a la gente. Generosamente.

Language