问控制jQuery可排序的允许放置位置

EN

$.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;
  }
});

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

$("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 {
      ...
    }
  }
})

<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>

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