ngx-bootstrap：可与模板排序（水平）

Question

我目前在使用ngx-bootstrap可排序组件时遇到问题。

我希望能够水平使用可排序组件，而不是doc示例中堆叠的垂直示例。 ngx-bootstrap sortable

任何人都可以通过提供潜在的解决方案在这里提供帮助，或者能够解释为什么使用ngx-bootstrap可能无法做到这一点。

Answer 1

bs-sortable在内部创建div以显示可拖动元素。现在默认情况下，display的div属性为block，这就是为什么它以垂直堆栈排列的原因。

要使其水平，您只需要在类display中将css属性inline-block添加到sortable-item。

Demo

模板

<div class="row">
  <div class="col">
    <bs-sortable
      [(ngModel)]="itemStringsLeft"
      itemClass="sortable-item"
      itemActiveClass="sortable-item-active"
      placeholderItem="Drag here"
      placeholderClass="placeholderStyle"
      wrapperClass="sortable-wrapper"
    ></bs-sortable>
    <pre class="code-preview">model: {{ itemStringsLeft | json }}</pre>
  </div>
</div>

<div class="row">
  <div class="col">
    <bs-sortable
      [(ngModel)]="itemStringsRight"
      itemClass="sortable-item"
      itemActiveClass="sortable-item-active"
      placeholderItem="Drag here"
      placeholderClass="placeholderStyle"
      wrapperClass="sortable-wrapper"
    ></bs-sortable>
    <pre class="code-preview">model: {{ itemStringsRight | json }}</pre>
  </div>
</div>

styles.css

.sortable-item {
    padding: 6px 12px;
    margin: 4px;
    font-size: 14px;
    line-height: 1.4em;
    text-align: center;
    cursor: grab;
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: #adadad;
    display: inline-block;
}