Question

我有一个可排序的列表，用户可以相互动态地附加项目。在以下示例中，“项目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的不同插件可以提供这个功能吗？

Answer 1

您可以选择传递可排序的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/

Answer 2

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

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

2 个答案: