Jquery UI sortierbares Raster Fixierte Elemente

Question

Ich habe den ganzen Tag damit verbracht, herauszufinden, wie man ein jquery ui sortierbares Raster mit gepinnten/klebrigen/gesperrten Elementen erstellt.

Suche um auf Stapel und Google hat mich so weit gekommen:

$(function() { 
    $("#sortable").sortable({ 
     start: function() { 
      $(this).find(".pinned").each(function() { 
       $(this).data("fixedIndex", $(this).index()); 
      }); 
     },   
     change: function() { 
      $(this).find(".pinned").each(function() { 
       $(this).detach().insertAfter($("#sortable li:eq(" + ($(this).data("fixedIndex")-1) + ")")); 
      }); 
     } 
    }); 
}); 

https://jsfiddle.net/mvirik/9ear1n3o/17/

Dies scheint gut zu funktionieren, aber wenn ich „gepinnt“ Klasse zum ersten oder letzten Punkt hinzufügen, es ist alles bricht zusammen.

Jede Hilfe wäre wirklich toll. Vielen Dank!

Answer 1

Dies schien den Trick zu tun:

$(function() { 
    $("#sortable").sortable({ 
     start: function() { 
      $(this).find(".pinned").each(function() { 
      $(this).data("fixedIndex", $(this).index()); 
      }); 
     },   
     change: function (event, ui) { 
      $(this).find(".pinned").each(function() { 
     if($(this).data("fixedIndex") != 0) { 
      $(this).detach().insertAfter($("#sortable li:eq(" + ($(this).data("fixedIndex")-1) + ")")); 
     } else { 
      $(this).detach().insertBefore($("#sortable li:eq(" + ($(this).data("fixedIndex")) + ")")); 
     } 
      }); 
     } 
    }); 
}); 

Versuch 54: https://jsfiddle.net/mvirik/9ear1n3o/54/ :)

Wenn jemand weiß, einen besseren Weg, es zu tun, um einen Kommentar fühlen sich frei.

Edit: Ich möchte aber auch die roten Gegenstände bewegen können. Dies funktioniert immer noch nicht richtig.