嵌套jQueryUI可排序的垂直占位符

Question

我正在寻找一种方法来创建一个可排序的占位符：

• 垂直，如果元素（.sortable-cell）即将传递为 连续的新单元格（.sortable-row）
• 水平，如果元素即将作为新行传递（我在单元格周围使用包装）。

垂直占位符（.highlight-vertical）工作正常，现在我正在弄清楚如何使水平占位符（.highlight-horizontal）工作。它需要一个if条件来使用哪个类。

它应该占据整行，应该添加元素，现在没有任何东西显示为水平占位符。

我不理解container placeholder属性中的update对象以及它在确定要显示的内容时的用途。

var sortableParameters = {
  connectWith: '.connectedSortable',
  placeholder: {
    element: function(currentItem) {
      return '<li class="highlight-vertical"></li>';
    },
    update: function(container, p) {
      console.log(container, p);
      //if (container.hasClass('.sortable-grid')) {
      //horizontal placeholder
      //} else {
      //vertical placeholder
      //}
      return;
    }
  },
  start: function(event, ui) {
    sender = $(this);
  },
  over: function(event, ui) {},
  stop: function(event, ui) {
    item = $(ui.item);
    receiver = $(ui.item.parent());

    //Create wrapper around cells passed into new rows
    if (item.hasClass('sortable-cell') && receiver.hasClass('sortable-grid')) {
      item.wrap("<li class='sortable-table'><ul class='sortable-row connectedSortable ui-sortable'></ul></li>").parent().sortable(sortableParameters);
    }

    //Remove empty rows
    if (sender.hasClass('sortable-row') && sender.children().length == 0) {
      sender.parent().remove()
    }
  }
}
$('.sortable-grid, .sortable-row').sortable(sortableParameters);

.sortable-grid .sortable-table {
  padding: 3px 0px;
  list-style-type: none;
  width: 100%;
  display: table;
}
.sortable-grid .sortable-row {
  height: 100%;
  display: table-row;
  padding: 5px 0px;
}
.sortable-grid .sortable-cell {
  background-color:#eeeeee;
  display: table-cell;
  cursor: move;
}
.sortable-grid .highlight-vertical {
  width: 5px;
  display: table-cell;
  background-color: blue;
}
.sortable-grid .highlight-horizontal {
  height: 5px;
  width: 100%;
  display: block;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script>

<ul class="sortable-grid connectedSortable">
  <li class="sortable-table">
    <ul class="sortable-row connectedSortable">
      <li class="sortable-cell">Item 1</li>
      <li class="sortable-cell">Item 2</li>
      <li class="sortable-cell">Item 3</li>
    </ul>
  </li>
  <li class="sortable-table">
    <ul class="sortable-row connectedSortable">
      <li class="sortable-cell">Item 4</li>
      <li class="sortable-cell">Item 5</li>
      <li class="sortable-cell">Item 6</li>
    </ul>
  </li>
</ul>

Answer 1

通过修改占位符的update()函数来实现占位符的动态切换。该函数使用参数container和placeholder，可以从中检索新的容器和占位符jQuery对象。

编辑：还有一个错误 - 当某些单元格被拖动到最后一行（或第一行）时，占位符不会出现。

＆＃13;

＆＃13;

var sortableParameters = {
  connectWith: '.connectedSortable',
  placeholder: {
    element: function(currentItem) {
      return '<li></li>';
    },
    update: function(container, placeholder) {
      if ($(container.element[0]).hasClass('sortable-grid')) {
        placeholder.removeClass('highlight-vertical');
        placeholder.addClass('highlight-horizontal');
        console.log('horizontal placeholder', placeholder);
      } else {
        placeholder.removeClass('highlight-horizontal');
        placeholder.addClass('highlight-vertical');
        console.log('vertical placeholder', placeholder);
      }
      return;
    }
  },
  start: function(event, ui) {
    sender = $(this);
  },
  over: function(event, ui) {},
  stop: function(event, ui) {
    item = $(ui.item);
    receiver = $(ui.item.parent());

    //Create wrapper around cells passed into new rows
    if (item.hasClass('sortable-cell') && receiver.hasClass('sortable-grid')) {
      item.wrap("<li class='sortable-table'><ul class='sortable-row connectedSortable ui-sortable'></ul></li>").parent().sortable(sortableParameters);
    }

    //Remove empty rows
    if (sender.hasClass('sortable-row') && sender.children().length == 0) {
      sender.parent().remove()
    }
  }
}
$('.sortable-grid, .sortable-row').sortable(sortableParameters);

＆＃13;

.sortable-grid .sortable-table {
  padding: 3px 0px;
  list-style-type: none;
  width: 100%;
  display: table;
}
.sortable-grid .sortable-row {
  height: 100%;
  display: table-row;
  padding: 5px 0px;
}
.sortable-grid .sortable-cell {
  background-color:#eeeeee;
  display: table-cell;
  cursor: move;
}
.sortable-grid .highlight-vertical {
  width: 5px;
  display: table-cell;
  background-color: blue;
}
.sortable-grid .highlight-horizontal {
  height: 5px;
  width: 100%;
  display: block;
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script>

<ul class="sortable-grid connectedSortable">
  <li class="sortable-table">
    <ul class="sortable-row connectedSortable">
      <li class="sortable-cell">Item 1</li>
      <li class="sortable-cell">Item 2</li>
      <li class="sortable-cell">Item 3</li>
    </ul>
  </li>
  <li class="sortable-table">
    <ul class="sortable-row connectedSortable">
      <li class="sortable-cell">Item 4</li>
      <li class="sortable-cell">Item 5</li>
      <li class="sortable-cell">Item 6</li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;