Контроль разрешенных мест размещения для сортировки jQuery - PullRequest
Новая
       4

Контроль разрешенных мест размещения для сортировки jQuery

1 голос
/ 04 апреля 2011

У меня есть сортируемый список, где пользователь может динамически прикреплять элементы друг к другу. В следующем примере «Элемент 3» прикреплен к «Элементу 2». Если прикреплены два элемента, я хочу, чтобы пользователь не пропускал элементы между двумя элементами, то есть в этом примере пользователю не должно быть разрешено помещать элементы между «Элементом 2» и «Элементом 3». 

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="attached">Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Есть ли обратный вызов, который позволяет мне контролировать, какие места размещения разрешены? В качестве альтернативы есть другой плагин, похожий на jQuery sortable, который может обеспечить эту функциональность?

Ответы [ 2 ]

0 голосов
/ 05 апреля 2011

Сортируемый виджет jQuery не предоставляет возможности для управления поведением разрешенной зоны отбрасывания. Однако проблема может быть решена путем подкласса виджета: 

$.widget("ui.custom_list", $.ui.sortable, {
  _mouseDrag: function(event) {
    // copy this code from the source code of jquery.ui.sortable.js

    //Rearrange
    for (var i = this.items.length - 1; i >= 0; i--) {

      //Cache variables and intersection, continue if no intersection
      var item = this.items[i], itemElement = item.item[0], intersection = this._intersectsWithPointer(item);
      if (!intersection) continue;

      if(itemElement != this.currentItem[0] //cannot intersect with itself
        &&  this.placeholder[intersection == 1 ? "next" : "prev"]()[0] != itemElement //no useless actions that have been done before
        &&  !$.ui.contains(this.placeholder[0], itemElement) //no action if the item moved is the parent of the item checked
        && (this.options.type == 'semi-dynamic' ? !$.ui.contains(this.element[0], itemElement) : true)


        // add this line
        && this._allowDropping(itemElement, (intersection == 1 ? "down" : "up"))



        //&& itemElement.parentNode == this.placeholder[0].parentNode // only rearrange items within the same container
      ) {

        this.direction = intersection == 1 ? "down" : "up";

      // Rest of the function

  },

  _allowDropping: function(itemElement, direction) {
    if(this.options.allowDropping) {
      return this.options.allowDropping(itemElement, direction);
    }
    return true;
  }
});

Функция _mouseDrag в основном копируется из сортируемого источника. Единственная корректировка - это строка: 

&& this._allowDropping(itemElement, (intersection == 1 ? "down" : "up"))

Затем можно настроить поведение разрешенной зоны отбрасывания, предоставив функцию для параметра allowDropping: 

$("ul").custom_list({
  allowDropping: function(element, direction) {
    // element refers to the item that would be moved but not the one being dragged
    if(direction == "up") {
      ...
    } else {
      ...
    }
  }
})
0 голосов
/ 04 апреля 2011

При желании вы можете передать сортируемую опцию items, которая позволяет вам указать, какие элементы вы хотите сортировать. Обратите внимание, что с помощью этого метода вы не сможете перемещать предметы два и три вокруг.

Html 

<ul id="list">
  <li>Item 1</li>
  <li class="attached">Item 2</li>
  <li class="attached">Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

JavaScript 

$("#sortable").sortable({ items: ':not(.attached)'});

Надеюсь, что вы попадете на правильный путь. Вот рабочая демонстрация: http://jsfiddle.net/SPPVc/

...