Question

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

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

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

Answer 1

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

要使其水平，您只需要在类block中的display上添加css属性inline-block。

模板

sortable-item

styles.css

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

编辑：

如果您只想在特定组件中进行更改，则可以在特定组件中使用.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; }伪选择器，而不是在全局style.css中进行更改（它将在全局中应用更改）。

app.component.css

ng-deep

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

1 个答案: