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

Question

I'm currently having an issue using the ngx-bootstrap sortable component.

I want to be able to use the sortable component horizontally instead of the stacked vertical examples from the doc examples. ngx-bootstrap sortable

Would anyone be able to help out here by providing a potential solution or be able to explain why this may not be possible using ngx-bootstrap.

Answer 1

bs-sortable creates div s internally to show the draggable elements. Now by default the display property of div is block , thats why it is arranged in vertical stack.

To make it horizontal you just need to add the css property display to inline-block in class sortable-item .

Demo

Template

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

EDIT:

Rather than making changes in global style.css (which will apply changes globally), if you want to make changes in particular component only, you can use ng-deep pseudo selector in particular component.

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