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

Question

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

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

是否有人能够通过提供潜在的解决方案来提供帮助，或者能够解释为什么这可能无法使用 ngx-bootstrap。

Answer 1

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

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

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

编辑：

而不是在全局 style.css 中进行更改（这将在全局应用更改），如果您只想在特定组件中进行更改，则可以在特定组件中使用 ng-deep 伪选择器。

app.component.css

bs-sortable::ng-deep .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;
}

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

ngx-bootstrap: Sortable with template (horizontally)

html

css

angular

bootstrap-4

ngx-bootstrap