jQuery Sortable: проверьте количество элементов и ведите себя - PullRequest
Новая
       5

jQuery Sortable: проверьте количество элементов и ведите себя

0 голосов
/ 04 февраля 2012

У меня есть этот кусок кода http://jsfiddle.net/THnan/

, но каждый раз, когда я сортирую элемент, я хотел бы проверить, сколько дочерних элементов имеет целевой div, и если их больше, чем N, код должен взятьпоследний дочерний элемент целевого элемента div и поместите его в НАЧАЛО начального элемента div (даже если последний дочерний элемент является новым отсортированным элементом).

Надеюсь, я укажу это ясно.Как мне добиться такого поведения?

Заранее спасибо!

1 Ответ

0 голосов
/ 04 февраля 2012

Что ж, вот «наивная» (как, впрочем, первый подход, который приходит на ум) версия, использующая событие sortable receive. Используется N для обозначения максимального количества элементов с обеих сторон.

http://jsfiddle.net/3NBT7/1/

$(function(){
   var N = 4;

   $("#left-side, #right-side").sortable({
      axis: "x",
      connectWith: ".droppable",
      receive: reSort
   })
   .disableSelection();

   // Called when a sortable item has been received, see above
   function reSort(event, ui)
   {
      var other, children;

      children = $(this).children();

      if (children.length > N)
      {
         // Find the other sortable panel, based on id. 
         // There are other ways, depending on the HTML.
         other = ($(this).attr("id") == "left-side")
               ? $("#right-side") 
               : $("#left-side");

         // Insert last child before first child of other:
         children.last().insertBefore(other.children().first());
      }
   }
});

Если бы прибегание зависело от стороны, я бы использовал вместо этого / else:

http://jsfiddle.net/3NBT7/4/

      if (children.length > N)
      {
          if ($(this).attr("id") == "left-side")
          {
              children.last().insertBefore($("#right-side").children().first());
          }
          else
          {
              children.first().insertAfter($("#left-side").children().last());
          }
      }
...