Trascina e rilascia con animazioni

Questa è più una domanda teorica che spero vada bene !? Voglio codificare il mio plugin drag and drop di jQuery, ma mi sto chiedendo quale sia il modo migliore per strutturare il mio codice e farlo effettivamente.

Nota: Questo può essere anche orientato all'opinione pubblica, ma non mi dispiace, ho solo bisogno di suggerimenti su un buon metodo per fare questo e strutturare il codice ecc.

Piano corrente:

Classe oggetto: Voglio utilizzare la programmazione orientata agli oggetti qui, quindi stavo per memorizzare il riferimento a ciascun elemento trascinabile in un'istanza di una classe, che a sua volta è memorizzato all'interno di una matrice. Quindi all'interno di questa classe posso fare calcoli basati su quell'oggetto trascinabile.

Quando catturare mousemove: Per risparmiare sulla potenza di calcolo degli altri script intensivi di JavaScript, stavo pensando solo a catturare i movimenti del mouse quando il mouse è inattivo su un oggetto.

Elementi in movimento: Bene, cambierò semplicemente la posizione degli oggetti in fixed / absolute e aggiusterò i valori in alto e a sinistra, cosa succede alla release I cover qui sotto.

Spostamento degli elementi per posizionare gli elementi selezionati e in effetti rilasciare un oggetto in una nuova posizione: Questo è lungo e in grassetto! Ma sì, non sono troppo sicuro di come andrei su questo! Fondamentalmente avrei una lista di li's che voglio riordinare, ma quando sposto un oggetto in una nuova posizione voglio che gli altri oggetti scivolino via senza problemi, preferibilmente usando le trasformazioni per passare l'animazione alla GPU.

Spostamento di elementi in altri stack: alcuni dei miei li's potrebbero avere ul's all'interno di allora, ho bisogno della capacità di rilevare quando si tenta di rilasciare l'elemento trascinabile in un altro elemento. Se questo ha senso! :(

Qualche esempio di struttura dei miei articoli?

<ul id="sortable">
  <li id="1">Home</li>
  <li id="2">Showroom
    <ul>
      <li>Stoke</li>
      <li>Macclesfield</li>
    </ul>
  </li>
  <li id="3">Finance</li>
  <li id="4">Servicing</li>
  <li id="5">About Us</li>
  <li id="6">Contact</li>
</ul>

Ho iniziato un po 'di codice, ma non voglio fare troppo se sto sbagliando tutto!

/* Global Javascript */
(function($) {
  $.fn.draggable = function() {
    // Establish our default settings
    var settings = $.extend({ }, options);

    class Item {
      constructor(obj) {
        this.elm = obj;
      }

      // Return the items dimentions
      getDimentions() {
        return new array((this.obj).outerWidth(), (this.obj).outerHeight());
      }
    }
    // Store draggable items
    var $items = new Array();
    $(this).each() {
      if ($(this).is('li')) {
        $items[] = new Item($(this));
      }
    }
    console.log($items);


    var $dragObject = null;
    function makeClickable(object) {
      object.onmousedown = function() {
        $dragObject = this;
      }
    }
    function mouseUp(ev) {
      $dragObject = null;
    }
  }
}(jQuery));
$('sortable').draggable();