10
我想使用jQuery UI和Bootstrap行/面板製作一組可拖動的面板。我有一些主要工作，我的問題是，當您拖動面板佔位符的大小不正確。它是整行的大小而不是元素的大小。帶有Bootstrap行的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/
任何想法？
我編輯的CSS在你的小提琴，改變你的'.panel-placeholder'的'margin'屬性'保證金：1EM 1EM 1EM 1EM;'似乎工作不夠好爲了我。或者你可以使用'margin：15px 1em 1em 15px;'這更符合bootstrap的邊距和填充。 –