大佬教程收集整理的这篇文章主要介绍了javascript – 带有引导行的jQuery UI排序占位符，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
$('.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/
有任何想法吗？
这个想法是一样的,我直接从.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>
以上是大佬教程为你收集整理的javascript – 带有引导行的jQuery UI排序占位符全部内容，希望文章能够帮你解决javascript – 带有引导行的jQuery UI排序占位符所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。