Sauvegarde d'un élément cloner jQuery UI

Bonjour,

J'ai mis en place un drag and drop de carré.

Je souhaite d'une part enregistrer leur dernière position dans le localStorage.

Grâce à cet enregistrement je pourrais actualiser la page et retrouver mon élément déplacer au bon endroit.

Dans l'idée ça fonctionne, cependant maintenant je souhaite "forcer" le drop dans des colonnes (ce que je fais dans le droppable avec le appendTo).

Du coup pour les placers dans ces colonnes j'utilise helper dans mon draggable pour faire un clone le temps du drag puis lorsque l'élément est drop je détache le clone de son original afin que ce soit au final l'original qu'il soit déplacé.

Le fonctionnement de cette démarche fonctionne, le souci est que je n'arrive pas à faire fonctionner la dernière position de mon élément sur la page avec localStorage et le rangement dans des colonnes.

J'imagine que c'est le "clone" qui pose problème mais je ne vois pas comment faire autrement car lorsque je ne l'utilise pas il me fait n'importe quoi.

Mes deux fonctionnalités fonctionnent bien mais chacun de leur côté.

La liaison des deux ne marche pas :/

C'est pourquoi aujourd'hui je viens vers vous afin d'avoir de l'aide car après de nombreuses recherches je ne trouve toujours pas ce qui pourrait m'aider dans mon cas...

Voici mon code :

var positions = JSON.parse(localStorage.positions || "{}");
$(document).ready(function () {

  var d = $("[id=carre]").attr("id", function (i) {
    return "carre_" + i;
  });

  $.each(positions, function (id, pos) {
    $("#" + id).css(pos);
  });

  d.draggable({
    // containment: ".limit",
    helper: "clone",
    scroll: false,
    stop: function (event, ui) {
      $(".carre").each(function (index) {
        if ($(this).attr("data-position") != index + 1) {
          $(this)
            .attr("data-position", index + 1)
            .addClass("updated");
        }
      });
      positions[this.id] = ui.position;
      localStorage.positions = JSON.stringify(positions);
    },
  });
  $(".groups").droppable({
    accept: ".carre",
    drop: function (event, ui) {
      ui.draggable.detach().appendTo($(this));
    },
  });

  $("#btnSession").click(function(){
    saveNewPositions();
  });
});

$(".carre") = l'ensemble de mes éléments drag (un carré)

d = $(".carre")

$(".groups") = l'ensemble de mes colonnes

Merci d'avance !