10
jQuery UI 및 부트 스트랩 행/패널을 사용하여 드래그 가능한 패널 세트를 만들려고합니다. 내가 주로 작동하는 뭔가가있어, 내 문제는 자리 표시자가 패널을 끌 때 올바르게 크기가 없다는 것입니다. 요소의 크기 대신 전체 행의 크기입니다.jQuery UI 부트 스트랩 행이있는 정렬 가능한 자리 표시 자
$('.row').sortable({
\t connectWith: ".panel",
\t handle: ".panel-heading",
\t placeholder: "panel-placeholder"
});
$('.panel').on('mousedown', function(){
\t $(this).css('cursor', 'move');
}).on('mouseup', function(){
\t $(this).css('cursor', 'auto');
});;.panel-placeholder {
\t border: 1px dotted black;
\t margin: 1em 1em 1em 1em;
\t 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="container-fluid">
\t <div class="row">
\t \t <div class="col-md-3">
\t \t \t <div class="panel panel-primary">
\t \t \t \t <div class="panel-heading">
\t \t \t \t \t <h3 class="panel-title">Panel title</h3>
\t \t \t \t </div>
\t \t \t \t <div class="panel-body">
\t \t \t \t \t Panel content
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div class="col-md-4">
\t \t \t <div class="panel panel-primary">
\t \t \t \t <div class="panel-heading">
\t \t \t \t \t <h3 class="panel-title">Panel title</h3>
\t \t \t \t </div>
\t \t \t \t <div class="panel-body">
\t \t \t \t \t Panel content
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div class="col-md-8">
\t \t \t <div class="panel panel-primary">
\t \t \t \t <div class="panel-heading">
\t \t \t \t \t <h3 class="panel-title">Panel title</h3>
\t \t \t \t </div>
\t \t \t \t <div class="panel-body">
\t \t \t \t \t Panel content
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
</div>$('.col-md-4').sortable({
connectWith: ".col-md-4",
handle: ".panel-heading",
placeholder: "panel-placeholder"
});
JSFiddle : https://jsfiddle.net/zdfb3e0p/8/
어떤 아이디어가?
https://jsfiddle.net/zdfb3e0p/16/
나는 마진'에'.panel-placeholder'의'margin' 속성을 변경하여 바이올린의 CSS 편집 나를 위해. 또는 '여백 : 15px 1em 1em 15px;'를 사용할 수 있습니다.이 방법은 부트 스트랩의 여백과 패딩에 더 가깝습니다. –