Встроенный список Bootstrap 4 с сортировкой jQueryUI - PullRequest
Новая
       37

Встроенный список Bootstrap 4 с сортировкой jQueryUI

0 голосов
/ 09 сентября 2018

Я пытаюсь использовать встроенный список начальной загрузки с сортировкой jqueryUI. Моя цель - иметь горизонтальный список, который можно сортировать. Каждый элемент списка будет содержать компонент карты начальной загрузки.

Проблема : при перетаскивании элемента списка (компонент карты) размер контейнера div удваивается.

Может кто-нибудь помочь?

Снимок экрана :

enter image description here

JSFiddle: JSFiddle 

 $(function() {
    $( "#sort_v" ).sortable({
      revert: true
    });    
    $( "#sort_h" ).sortable({
      revert: true
    });    
    $( "#sort_h_basic" ).sortable({
      revert: true
    });    
    $( "ul, li" ).disableSelection();
  });
.col {
  border: solid 1px #6c757d;
  padding: 10px;
  margin: 10px;
}

.list-group, .list-inline {
  border: solid 1px red;
}

.list-inline-item {
  border: solid 1px blue;
}

.panel-placeholder {
	border: 1px dotted orange;
    border-radius: 4px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
  <!-- Vertical 
  <div class="row">
    <div class="col">
      <ul id="sort_v" class="list-group">
        <li class="list-group-item">Item 1</li>
        <li class="list-group-item">Item 2</li>
        <li class="list-group-item">Item 3</li>
        <li class="list-group-item">Item 4</li>
        <li class="list-group-item">Item 5</li>
      </ul>
    </div>
  </div>
  --> 
  <div class="row">
    <div class="col">
      <ul id="sort_h_basic" class="list-inline">
        <li class="list-inline-item">Item 1</li>
        <li class="list-inline-item">Item 2</li>
        <li class="list-inline-item">Item 3</li>
        <li class="list-inline-item">Item 4</li>
        <li class="list-inline-item">Item 5</li>
      </ul>
    </div>
  </div>
  <!-- Horizontal -->
  <div class="row">
    <div class="col">
      <ul id="sort_h" class="list-inline">
        <li class="list-inline-item">
          <div class="card" style="width: 18rem;">
            <div class="card-body">
              <h5 class="card-title">Item 1</h5>
              <p class="card-text">Some quick example text to build on the card title</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
             </div>
           </div>
        </li>
        <li class="list-inline-item">
          <div class="card" style="width: 18rem;">
            <div class="card-body">
              <h5 class="card-title">Item 2</h5>
              <p class="card-text">Some quick example text to build on the card title</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
             </div>
           </div>          
        </li>
        <li class="list-inline-item">
          <div class="card" style="width: 18rem;">
            <div class="card-body">
              <h5 class="card-title">Item 3</h5>
              <p class="card-text">Some quick example text to build on the card title</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
             </div>
           </div>        
        </li>
      </ul>  
    </div>
  </div>  
</div>
...