我已经为使用 JQuery UI 1.12.1、JQuery 3.1.0 和 Bootstrap 3.3.7 创建了一个测试脚本。
我的工作几乎都离不开一个问题。我在下面创建了 fiddle
https://jsfiddle.net/woldsnewmedia/aLm44L8p/
问题是，当将一个 Div 拖过右侧边缘的一个 Div 时，所有内容都会跳下来。有人发现我哪里出错了吗？代码在这里:-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/scripts/css/bootstrap.min.css" /><!-- v3.3.7 -->
<script type="text/javascript" src="/scripts/js/jquery-3.1.0.min.js"></script><!-- v3.1.0 -->
<script type="text/javascript" src="/scripts/js/bootstrap.min.js"></script><!-- v3.3.7 -->
<script type="text/javascript" src="/scripts/js/jquery-ui.js"></script><!-- v1.12.1 -->
<style type="text/css">
.dragdrop-placeholder {
background-color:red;
margin-top:18px!important;
margin-left:15px!important;
}
.hnd1{
height:200px;
background-color:blue;
}
</style>
<title></title>
<script type="text/javascript">
$( document ).ready(function() {
$('.wrow1').sortable({
connectWith: ".wdragdrop1",
handle: ".wdragdrop1",
placeholder: "dragdrop-placeholder",
update: function (e, ui) {
var widget_ids = $(this).sortable('toArray').toString();
console.log(widget_ids);
},
start: function(e, ui){
ui.placeholder.width(ui.item.find('.wdragdrop1').width());
ui.placeholder.height(ui.item.find('.wdragdrop1').height());
ui.placeholder.addClass(ui.item.attr("class"));
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="row wrow1">
<div class="col-md-3 col-sm-3" id="1">
<div class="wdragdrop1">
<h3 class="hnd1">Box 1</h3>
</div>
</div>
<div class="col-md-3 col-sm-3" id="2">
<div class="wdragdrop1">
<h3 class="hnd1">Box 2</h3>
</div>
</div>
<div class="col-md-3 col-sm-3" id="3">
<div class="wdragdrop1">
<h3 class="hnd1">Box 3</h3>
</div>
</div>
<div class="col-md-3 col-sm-3" id="4">
<div class="wdragdrop1">
<h3 class="hnd1">Box 4</h3>
</div>
</div>
<div class="col-md-3 col-sm-3" id="5">
<div class="wdragdrop1">
<h3 class="hnd1">Box 5</h3>
</div>
</div>
<div class="col-md-3 col-sm-3" id="6">
<div class="wdragdrop1">
<h3 class="hnd1">Box 6</h3>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
所有 col-**-# 每行总和应为 12。如果大于则下一个元素将转到下一行。
关于javascript - Jquery UI 可使用引导列进行排序 - 右手边缘下降将较低的行向下推，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49966094/