使用 sortable() 时无法对框进行排序

Question

我想把左边的盒子换成右边的盒子。我正在使用来自 jQuery UI 的函数sortable()。正如您在我的代码中看到的，它适用于 1 和 2 的数字，但不适用于左右切换它们的框。

$(".sort-me").sortable({
  connectWith: ".connectedSortable"
});

.title {
  background: red;
}

.storename {
  background: blue;
}

.row {
  margin-top: 1rem;
  margin-bottom: 1rem;
}


/* metatag generator relevant */

.mg-item {
  display: inline-block;
}

.mg-item-inner {
  display: flex;
}

.mg-item-inner .btn-group .btn .name {
  margin-right: 1rem;
}

.mg-item-inner>.btn-group:not(.collapsed)>.btn:first-child {
  cursor: -webkit-grab;
  cursor: grab;
}

.mg-item-inner .input-group-btn:only-child>.btn {
  border-radius: 4px;
}

.mg-item-inner>.btn-group,
.mg-item-inner>.input-group {
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 10px 20px rgba(0, 0, 0, 0.04);
}

.mg-item-inner>.btn-group+.input-group,
.mg-item-inner>.input-group+.input-group,
.mg-item-inner>.btn-group+.btn-group,
.mg-item-inner>.input-group+.btn-group {
  margin-left: -1px;
}

.mg-item span.add {
  background: transparent;
  color: #444;
  padding-left: 0;
  margin-left: 0;
}

.mg-item span.add:active {
  box-shadow: unset;
  color: #313131;
}

.mg-item span.add .fa-plus-circle {
  opacity: 0;
}

.mg-item:hover span.add .fa-plus-circle {
  opacity: 1;
}


/*# sourceMappingURL=mg.css.map */

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
<div class="container">
  <!-- Title -->
  <div class="row">
    <div draggable="true" class="sort-me title connectedSortable">
      <div class="col-md-3">
        <div class="mg-item-inner">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Gibt den Seitentitel aus'>
              <span class="name">TITLE</span><i class="fas fa-arrows-alt"></i></button>
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title="Linie Erweitern / Reduzieren">
              <i class="fas fa-swatchbook"></i></button>
          </div>
          <!-- /btn-group -->
          <div class="input-group" role="group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
              <ul class="dropdown-menu">
                <li><a href="#">prefix</a></li>
                <li><a href="#">suffix</a></li>
                <li><a href="#">none</a></li>
              </ul>
            </div>
            <!-- /input-btn-group -->
            <input type="text" class="form-control">
          </div>
          <!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
        </div>
        <!-- /mg-item-inner -->
      </div>
      <!-- /mg-item -->
    </div>

    <!--STORE NANE  -->
    <div draggable="true" class="sort-me storename connectedSortable">
      <div class="col-md-3">
        <div class="mg-item-inner">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Fügt den Storename hinzu'>
              <span class="name">STORENAME</span><i class="fas fa-arrows-alt"></i></button>
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Linie Erweitern / Reduzieren">
              <i class="fas fa-swatchbook"></i></button>
          </div>
          <!-- /btn-group -->
          <div class="input-group" role="group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
              <ul class="dropdown-menu">
                <li><a href="#">prefix</a></li>
                <li><a href="#">suffix</a></li>
                <li><a href="#">none</a></li>
              </ul>
            </div>
            <!-- /input-btn-group -->
            <input type="text" class="form-control">
          </div>
          <!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
        </div>
        <!-- /mg-item-inner -->
      </div>
      <!-- /mg-item -->
    </div>
  </div>
</div>

<div class="sort-me">
  <div class="connectedSortable">
    <h1>
      1
    </h1>
  </div>
  <div class="connectedSortable">
    <H1>2</H1>
  </div>
</div>

https://jsfiddle.net/mjc9as5L/

箱子不能分拣是什么原因？可能是 CSS 问题吗？

Answer 1

尝试将 flex 添加到您的行中，它可能会解决您的问题。

.container > .row{
  display:flex;
  flex-direction:row-reverse;
  justify-content:start;
}