我是 Jquery 新手。 我想对我的数据列表使用 sortableUI。数据列表中的每一行包含 带有序列号的文本。我已经成功使用了 sortable ui。但现在 我想在排序时移动文本而不是序列号。 这是我的示例代码。 div 显示序列号 每个里的左上角。现在如果我尝试策略拖动 例如第 2 个李和第 3 个李，则第 3 个项目转到第 2 个位置，如下所示 规则，但问题是它位于第二项的 div 之后(它应该在哪里) 像第一次加载一样在 div 之前)。结果，根据div的 样式..序列号 1 和 2 在第一项的位置重叠。
有什么办法可以让div保持在它之后 排序时对应的li？
<ul id="ulSortable" class="ui-sortable" >
<li class="Decide_Rank_Item_Li">test A</li>
<div class="DisplayOrder">1</div>
<li class="Decide_Rank_Item_Li">Test B</li>
<div class="DisplayOrder">2</div>
<li class="Decide_Rank_Item_Li">Test C</li>
<div class="DisplayOrder">3</div>
<li class="Decide_Rank_Item_Li">Test D</li>
<div class="DisplayOrder">4</div>
</ul>
排序前的图像:
现在，如果我开始稍微移动，您可以看到包含序列号的 div 仍然显示在正确的位置
<小时/>
将第 2 项排序到第 3 项后
<ul id="ulSortable" class="ui-sortable" >
<li class="Decide_Rank_Item_Li">test A</li>
<div class="DisplayOrder">1</div>
<div class="DisplayOrder">2</div>
<li class="Decide_Rank_Item_Li">Test C</li>
<li class="Decide_Rank_Item_Li">Test B</li>
<div class="DisplayOrder">3</div>
<li class="Decide_Rank_Item_Li">Test D</li>
<div class="DisplayOrder">4</div>
</ul>
排序后的图像:
Can't see image
这里显示了Li和Div的样式 风格:
.Decide_Rank_Item_Li
{
position: relative;
display: block;
border-color: #C0C0C0;
border-width: 1px;
border-style: solid;
vertical-align: bottom;
width: 110px;
height: 100px;
float:left;
background-color: #F8F8F8;
}
.DisplayOrder
{
position: relative;
display: block;
float: left;
top: 5px;
left: -105px;
z-index: 100;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding: 0px;
margin: 0px;
width: 0px;
clear: right;
color: #808080;
}
最佳答案
只是想到了一个更优雅的替代解决方案:http://jsbin.com/udina
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
li {
width: 100px;
height: 100px;
float: left;
background: #F8F8F8;
border: 1px solid #C0C0C0;
list-style-position: inside;
color: #C0C0C0;
}
div {
text-align: center;
color: #C0C0C0;
font-size: 120%;
}
.placeholder {
list-style-type:decimal;
}
</style>
</head>
<body>
<ol>
<li><div>Test Content A</div></li>
<li><div>Test Content B</div></li>
<li><div>Test Content C</div></li>
<li><div>Test Content D</div></li>
<li><div>Test Content E</div></li>
<li><div>Test Content F</div></li>
<li><div>Test Content G</div></li>
<li><div>Test Content H</div></li>
<li><div>Test Content I</div></li>
<li><div>Test Content J</div></li>
<li><div>Test Content K</div></li>
<li><div>Test Content L</div></li>
<li><div>Test Content M</div></li>
<li><div>Test Content N</div></li>
<li><div>Test Content O</div></li>
<li><div>Test Content P</div></li>
<li><div>Test Content Q</div></li>
<li><div>Test Content R</div></li>
<li><div>Test Content S</div></li>
<li><div>Test Content T</div></li>
<li><div>Test Content U</div></li>
<li><div>Test Content V</div></li>
<li><div>Test Content W</div></li>
<li><div>Test Content X</div></li>
<li><div>Test Content Y</div></li>
<li><div>Test Content Z</div></li>
</ol>
<script>
$(function(){
$('ol').sortable({
helper: function(evt, el){
return el.clone().css('color', '#F8F8F8');
},
placeholder: 'placeholder'
});
});
</script>
</body>
</html>
关于javascript - 使用 jquery 对 <li> 和 <div> 的组合进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/851123/