排序組合 <li> 和 <div> 使用jQuery
[英]sort combination of <li> and <div> using jquery
問題描述
我是Jquery新手。 我想對我的數據列表使用sortableUI。 數據列表中的每一行都包含帶有序列號的文本。 我已經成功使用了可排序的ui。 但是現在我要在排序時移動文本而不是序列號。 這是我的示例代碼。 div在每個li的左上角顯示序列號。 現在，如果我嘗試將第2個Li和第3個Li進行分層拖動，則第3個項目將按規則移至第2個位置，但問題是它在第2個項目的div之后（應該在div之前，如第一個加載）。 結果，根據div的樣式，序列號1和2在第一個項目的位置重疊。
在排序時對應的li之后，有什么方法可以用來保留div？
<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在正確的位置仍然沒有顯示
將第二項分類為第三項之后
<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>
排序后的圖像：
看不到圖像
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;
}
3 個解決方案
解決方案1
2 2009-05-12 07:25:31
我不得不更改HTML和CSS，但我認為這可以達到您想要的效果。
這是一個托管的演示： http : //jsbin.com/erigu （可通過http://jsbin.com/erigu/edit編輯）
<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">
* { margin: 0; padding: 0; }
#numbers>div, #sortables>div {
width: 110px;
height: 100px;
float: left;
border: 1px solid #C0C0C0;
}
#numbers>div {
padding-bottom: 20px;
font: bold 12px Arial, Helvetica, sans-serif;
color: #808080;
background-color: #F8F8F8;
}
#sortables>div {
padding-top: 20px;
text-align: center;
color: black;
}
#sortables {
position: absolute;
left: 0px;
}
</style>
</head>
<body>
<div id="numbers">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div id="sortables">
<div>Test A</div>
<div>Test B</div>
<div>Test C</div>
<div>Test D</div>
</div>
<script>
$(function(){
$('#sortables').sortable({
/*
The helper option allows you to customize the dragged element.
in this case we are adding a background.
*/
helper: function(evt, el){
return el.clone().css({background:'#F8F8F8'});
}
});
});
</script>
</body>
</html>
解決方案2
2 已采納 2009-05-12 08:50:51
只是想到了一個更優雅的替代解決方案： 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>
解決方案3
0 2009-05-12 05:13:46
最簡單的事情可能是將li / div對放在另一個元素內，然后根據該元素進行排序。
這樣的事情應該起作用，盡管您有很多選擇方式。 sortable功能不需要您使用li元素。
<ul id="ulSortable" class="ui-sortable" >
<li class="Decide_Rank_Item_Li">
<span>test A</span>
<div class="DisplayOrder">1</div>
</li>
<li class="Decide_Rank_Item_Li">
<span>test B</span>
<div class="DisplayOrder">2</div>
</li>
<li class="Decide_Rank_Item_Li">
<span>test C</span>
<div class="DisplayOrder">3</div>
</li>
<li class="Decide_Rank_Item_Li">
<span>test D</span>
<div class="DisplayOrder">4</div>
</li>
</ul>
使用 jquery UI sortable 對多個 UL 和 LI 元素進行排序
[英]Sort Multiple UL and LI elements using jquery UI sortable
在div中查找ul，然后使用jquery將li標簽附加到該ul
[英]Finding the ul inside a div and append li tag to that ul using jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.