我试图使用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代码本身的填充/边距交互.
我试图保持最小的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>
