Hi, I am new in Jquery. I want to use sortableUI to my datalist. Each row in datalist contains text with serial number. I have used sortable ui successfully. But now I want move the text not the serial number while sorting. Here is my Example Code. The div displays the serial number at the top-left corner of each li. Now If I try to strat dragging for instance 2nd Li with 3rd li then 3rd item goes to 2nd position as rule but problem is that it goes after 2nd item's div (where it should be before div like first load). As a result, according to div's style.. serial no 1 and 2 overlap at 1st item's position.
Is there any way i could use to keep the div just after it's corresponding li while sorting?
<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>
Image Before sorting:
Now if I start moving a slight, u can see the div containing serial no still shows at right place
After sorting 2nd item to 3rd
<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>
Image after sorting:
Can't see image
The style of Li and Div are shown here Style:
.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;
}
-
Simplest thing might be to put the
li/divpairs inside of another element, and sort based on that.Something like this should work, although there a lot of options on how you want to do it. The sortable feature doesn't require that you use
lielements.<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>miti737 : Thanks for your response. But according to the project i am working, only the item will be sorted, serial number should not be moved like the following image. http://i42.tinypic.com/14n0ll5.pngmiti737 : If i use your code, as div is inside the dragable li, the serial No. moves with the text. Is there any other way to keep the div fixed while sorting? -
I had to change the HTML and CSS but I think this achieves the effect you were after.
Here's a hosted demo: http://jsbin.com/erigu (Editable via 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>miti737 : Thanks a lot! This is exactly what I want. Thanks again!!! -
Just thought of an alternate solution that is a little more elegant: 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>miti737 : thanks again..I agree with you that this one is more elegant. I will switch to this one. As I am new user, could not vote u up buddy.
0 comments:
Post a Comment