JQuery的jqui里面无法操控connectToSortable横向拖不动，只能竖着拖
<style>.draggable{width:100px;height:100px;background:#ccc;}ul{list-style-type:none;m...
<style>
.draggable {
width: 100px;
height: 100px;
background: #ccc;
}
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px;}
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
});
</script>
<body class="main_frame_style" >
<table border="1" style="width: 100%">
<tr>
<td>
<ul id="draggable">
<li class="draggable">SSS</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul id="sortable">
<li class="draggable">111</li>
<li class="draggable">222</li>
<li class="draggable">333</li>
<li class="draggable">444</li>
<li class="draggable">555</li>
</ul>
</td>
</tr>
</table>
</body>
只要在li处加上 float: left; 就无法拖动了
以上图片，第一个图片就是让底下这排横着来，想把SSS复制拖动到底下，不行，第二个图片就行，就是因为这个float: left;
我就是想做成第一个图片那种样式 展开
.draggable {
width: 100px;
height: 100px;
background: #ccc;
}
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px;}
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
});
</script>
<body class="main_frame_style" >
<table border="1" style="width: 100%">
<tr>
<td>
<ul id="draggable">
<li class="draggable">SSS</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul id="sortable">
<li class="draggable">111</li>
<li class="draggable">222</li>
<li class="draggable">333</li>
<li class="draggable">444</li>
<li class="draggable">555</li>
</ul>
</td>
</tr>
</table>
</body>
只要在li处加上 float: left; 就无法拖动了
以上图片，第一个图片就是让底下这排横着来，想把SSS复制拖动到底下，不行，第二个图片就行，就是因为这个float: left;
我就是想做成第一个图片那种样式 展开
1个回答
展开全部
如果你的li需要浮动的话，试试看给ul加一个class，例如
<ul class="clearFloat">
.clearFloat的定义为（不能修改哦，亲，里面的每一行都有用的）
.clearFloat:after {
visibility: hidden;
clear: both;
display: block;
height: 0px;
content: "."
}
.clearFloat {
zoom: 1;
}
这个样式是专门用来清除浮动的。如果代码不能恰当的清除浮动会造成容器大小的计算错误，导致拖动失败
<ul class="clearFloat">
.clearFloat的定义为（不能修改哦，亲，里面的每一行都有用的）
.clearFloat:after {
visibility: hidden;
clear: both;
display: block;
height: 0px;
content: "."
}
.clearFloat {
zoom: 1;
}
这个样式是专门用来清除浮动的。如果代码不能恰当的清除浮动会造成容器大小的计算错误，导致拖动失败
追问
实现了，但是事实上，效果很差，过程很难看，而且貌似结果并不是非常好，我估计是JQui的插件有什么属性要定义，但是不知道~~
追答
这个...我就没办法了，确实jQ的sortable效果不好，简单的还行，稍微复杂一点就很难拖到指定位置了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
