JQuery UI Sortable Grid Pinned Items

Question

Я проводил весь день, пытаясь понять, как создать сортировую сетку jquery ui с прикрепленными/липкими/заблокированными элементами.

Поиск вокруг в стеке и Google приобрели мне это далеко:

$(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/

Это, кажется, работает хорошо, но если добавить «прижат» класс первый или последний элемент, он все ломается.

Любая помощь будет действительно замечательной. Спасибо!

Answer 1

Это, казалось, сделать трюк:

$(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")) + ")")); 
     } 
      }); 
     } 
    }); 
}); 

Покушение 54: https://jsfiddle.net/mvirik/9ear1n3o/54/ :)

Если кто-нибудь знает лучший способ сделать это, не стесняйтесь комментировать.

Редактировать: все же, я также хочу, чтобы иметь возможность перемещать красные предметы. Это все еще работает неправильно.