我试图使用jQuery UI和Bootstrap行/面板制作一组可拖动的面板.我有一些主要工作的东西,我的问题是,当您拖动面板时占位符的大小不正确.它是整个行的大小而不是元素的大小.
@H_404_15@解决方法
$('.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>