Я пытаюсь сделать перетаскиваемый набор панелей, используя jQuery UI и Bootstrap rows/panels. У меня есть что-то, что в основном работает, моя проблема в том, что заполнитель не имеет правильного размера при перетаскивании панели. Это размер всей строки, а не размер элемента.
$('.row').sortable({
connectWith: ".panel",
handle: ".panel-heading",
placeholder: "panel-placeholder"
});
$('.panel').on('mousedown', function(){
$(this).css( 'cursor', 'move' );
}).on('mouseup', function(){
$(this).css( 'cursor', 'auto' );
});;
.panel-placeholder {
border: 1px dotted black;
margin: 1em 1em 1em 1em;
height: 50px;
}
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
<link href="#" onclick="location.href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css'; return false;" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>