Estoy trabajando en un sitio web de WordPress y quiero que el usuario pueda reordenar los widgets de la barra lateral incluso si el sitio se vuelve a cargar.

Así que estoy usando Sortable JS y usando el guardado y la restauración del tipo , ya que planeo almacenarlo en localStorage pero no pude hacerlo funcionar. Es bastante sencillo en la documentación y la demostración, pero por alguna razón, no funciona para mí y no estoy seguro de lo que me estoy perdiendo.

A continuación se muestra la clasificación predeterminada de los elementos.

Y una vez que reordeno estos widgets, obtengo este resultado.

Creo que el problema fue que el nombre de las teclas es incorrecto. Vea el texto resaltado con azul en la imagen a continuación. Falta en la matriz llamada desde el método set.

Entonces, lo resaltado en azul aquí es el registro del método get: function (sortable) y la salida de la matriz es del set: function (sortable) .

Aquí hay un video rápido para verlo más claro.

A continuación se muestra mi código.

 let el = document.getElementById('sticky-sidebar'); Sortable.create(el, { group: 'foo', animation: 100, draggable: ".widget_block", store: { /** * Get the order of elements. Called once during initialization. * @param {Sortable} sortable * @returns {Array} */ get: function (sortable) { var order = localStorage.getItem(sortable.options.group.name); console.log(order) return order ? order.split('|') : []; }, /** * Save the order of elements. Called onEnd (when the item is dropped). * @param {Sortable} sortable */ set: function (sortable) { var order = sortable.toArray(); console.log(order) localStorage.setItem(sortable.options.group.name, order.join('|')); } } });