I am having an issue with the sortable widget not working properly after I programmaticllay set a drop position for one of the sortable elements (a line item in this example).

 

The working sample is below and would probably be much easier to understand my issue if you try it yourself. 

 

All it does is create 3 colums. The 9 line items are dynamically created in the left column.

After Item5 is created, it is moved to the 3rd column "sortable3" using the .offset method.

 

Once all of the items are created in the left column, Item5 is in the 3rd column BUT the spot where it would have been is still in the left column. (its just an empty spot between item4 and item6). At this point, once you start moving the items around, Item5's move behaviour is all wrong.

 

What I want is for Item6 to be immediately after Item4 and item5 to still move about the same as the other 8 items. Any thoughts?

 

 

< html lang ="en">< head > < title > jQuery UI Sortable - Handle empty lists </ title >

<script src="C:\Inetpub\wwwroot\libs\jquery\1.9.1\jquery-1.9.1.js"></script>
<
script src ="C:\Inetpub\wwwroot\libs\jquery-ui\1.10.4\jquery-ui.js"></ script >

< style >

#

sortable1 , # sortable2 , # sortable3 { list-style-type : none ; margin : 0 ; padding : 0 ; float : left ; margin-right : 10px ; background : #eee ; padding : 5px ; width : 143px ;}

#

sortable1 li , # sortable2 li , # sortable3 li { margin : 5px ; padding : 5px ; font-size : 1.2em ; width : 120px ; }

</ style >

< script >

$(

function () {

$(

"ul.droptrue" ).sortable({

connectWith:

"ul"

});

$(

"#sortable1, #sortable2, #sortable3" ).disableSelection();

});

</ script >

</

head >

<

body >

<

ul id ="sortable1" class ="droptrue">

< script type ="text/javascript" language ="javascript"> //the line items are added dynamically

for (i=1;i<10;i++)

{

document.write(

"<li id='item" + i + "'>Item " + i + "</li>" );

if (i==1){ //as they are added, put item1 (or any item for that matter) in a specific location

$( "#item5" ).offset({top: 20, left: 346});

}

}

</ script >

</

ul >

<

ul id ="sortable2" class ="droptrue"></ ul >

<

ul id ="sortable3" class ="droptrue"></ ul >

<

br style =" clear : both">

</

body >

</

html >