javascript – 带有引导行的jQuery UI排序占位符

我试图使用jQuery UI和Bootstrap行/面板制作一组可拖动的面板.我有一些主要工作的东西,我的问题是,当您拖动面板时占位符的大小不正确.它是整个行的大小而不是元素的大小.

$('.row').sortable({
	connectWith: ".panel",handle: ".panel-heading",placeholder: "panel-placeholder"
});

$('.panel').on('mousedown',function(){
	$(this).css( 'cursor','move' );
}).on('mouseup','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="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">
	<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>

$('.col-md-4').sortable({
    connectWith: ".col-md-4",placeholder: "panel-placeholder"
});

JSfiddle：https://jsfiddle.net/zdfb3e0p/8/

有任何想法吗？

解决方法

OpherV解决方案.然而,这是一个简化版本,它仍然可以工作,并试图通过将CSS事项留在CSS代码上来保持关注的分离.
我试图保持最小的js代码本身的填充/边距交互.

这个想法是一样的,我直接从.panel获取宽度和高度,并且像col上的所有类一样复制.但是边距和边距是通过CSS设置来匹配Bootstrap的默认值.

你可以在下面的代码片段或jsfiddle上找到它. https://jsfiddle.net/zdfb3e0p/16/

$('.row').sortable({
     connectWith: ".panel",placeholder: "panel-placeholder",start: function(e,ui){
         ui.placeholder.width(ui.item.find('.panel').width());
         ui.placeholder.height(ui.item.find('.panel').height());
         ui.placeholder.addClass(ui.item.attr("class"));
     }
});

$('.panel').on('mousedown',function(){
  $(this).css( 'cursor','auto' );
});;

.panel-placeholder {
  border: 1px dotted black;
  border-radius: 4px;
  margin: 0 15px 20px 15px;
  padding: 0;
  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">
	<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>