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

Question

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

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

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

Answer 1

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

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

演示

模板

<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进行更改（这将应用全局更改），如果您只想在特定组件中进行更改，则可以在特定组件中使用ng-deep伪选择器。

应用组件.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;
}