JQ拖拽li的时候，下一行的元素直接浮动上来，有什么办法可以阻止？
JQ实现如图的效果 每当刚刚开始拖拽每一行最后一个元素的时候，下一面一行会自动浮动上来，排版错位，有什么方法可以组织下一行元素浮动上来么？
html结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="bodyBg" id="box">
<div class="title_bg row">
<img class="col-xs-3 col-sm-3 col-md-3 col-lg-3 " src="img/title.png" alt="">
</div>
<div class="row parent">
<ul class="row wrap col-xs-5 col-sm-5 col-md-5 col-lg-5 ">
</ul>
</div>
</div>
</body>
</html>css
* {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}
ul,
li {
overflow: hidden;
list-style: none;
overflow-x: hidden;
overflow-y: hidden;
}
html {
font-size: 10px;
}
.container-fluid,
.row,
p {
margin: 0;
padding: 0;
}
.bodyBg {
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
height: 100px;
background-image: url(../img/body_bg.jpg);
background-size: 100% 100%;
}
.title_bg {
width: 100%;
height: 100px;
background-image: url(../img/title_bg.png);
background-repeat: no-repeat;
display: -webkit-flex;
/* Safari */
display: flex;
justify-content: center;
align-items: center;
}
.parent {
display: -webkit-flex;
/* Safari */
display: flex;
justify-content: center;
align-items: center;
}
.block {
height: 100px;
background-image: url(../img/box_bg.png);
background-size: 100% 100%;
margin: 0;
padding: 0;
font-size: 1.4rem;
color: #fff;
display: -webkit-flex;
/* Safari */
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.logo {
width: 40%;
margin-bottom: 10px;
}
$.ajax({
//几个参数需要注意一下
type: "GET", //方法类型
dataType: "json", //预期服务器返回的数据类型
url: "js/index.json", //url
data: $('#form1').serialize(),
success: function(result) {
console.log(result);
for (i = 0; i < result.length; i++) {
$(".wrap").append('<li class="block col-xs-4 col-sm-4 col-md-4 col-lg-4" >' +
' <img class="logo" src="' + result[i].img + '" alt="">' +
'<p>' + result[i].title + '</p>' +
'<p>' + result[i].container + '</p>' +
'</li>');
$(".wrap li").height($(".wrap li").width());
var docmontHeight = $(".title_bg").height() + $(".parent").height();
if ($(document).height() > docmontHeight) {
$(".bodyBg").height($(document).height());
} else {
$(".bodyBg").height(docmontHeight);
}
$(".wrap").sortable(
{revert: true}
);
}
},
error: function() {
alert("异常！");
}
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
自己解决了！