Web app using jquery ui sortable, drag and drop, animation works in Firefox but not other browsers
I have a web application that I use to help me choose my work schedule. Basically I'm trying to emulate itunes. Each work schedule is a list item that is sortable. The list items are ajax loaded into separate unordered lists. On the left is a sidebar with an unordered list that acts just like a play list. You can drag and drop work schedules up and down to change their order or over onto different lists. And when you click on a list on the left, only the list items in that list show up. Every thing works great in firefox. But when using other browsers it gets incredibly slow after you click on a line list in the left sidebar. As the number of list items increases, the speed slows down.
My jquery code is in the head of the document Here is the html for the test page.
<body>
<div id='sideBar'>
<p class='listTitle'>LIBRARY</p>
<ul class='lineList'>
<li id='all_lines' class='list'>All Lines<span class='listTotal'>5</span></li>
</ul>
<p class='listTitle'>Line Lists<span class="addList ui-icon ui-icon-circle-plus">h</span></p>
<ol id="userLists" class='lineList'>
<li id='top_picks' class='list' >Top picks<span class='listTotal'>5</span> </li>
<li id='one_day' class='list' >One day<span class='listTotal'>5</span></li>
<li id='two_day' class='list' >Two day<span class='listTotal'>5</span></li>
<li id='three_day' class='list' >Three day<span class='listTotal'>5</span></li>
<li id='four_day' class='list' >Four Day<span class='listTotal'>5</span></li>
<li id='mixed' class='list' >Mixed<span class='listTotal'>5</span></li>
<li id='reserve' class='list' >Reserve<span class='listTotal'>5</span></li>
<li id='deleted' class='list' >Deleted<span class='listTotal'>5</span></li>
</ol>
</div> <!-- end of Sidebar div div (holds all the line lists on the right side) -->
<div id='linecontainer' class='ui-widget'>开发者_Go百科
<!-- each ul could have 0 to as many as 300 list items -->
<ul id="TOP_PICKS" class='ui-widget-content'>
<li>lots of line html</li>
<li>many many list items </li>
<li>repeat for each list below</li>
</ul>
<ul id="ONE_DAY" class='ui-widget-content'></ul>
<ul id="TWO_DAY" class='ui-widget-content'> </ul>
<ul id="THREE_DAY" class='ui-widget-content'> </ul>
<ul id="FOUR_DAY" class='ui-widget-content'> </ul>
<ul id="MIXED" class='ui-widget-content'> </ul>
<ul id="RESERVE" class='ui-widget-content'> </ul>
<ul id="DELETED" class='ui-widget-content'> </ul>
</div> <!-- End linecontainer div -->
<div id='sequence' title=""> </div>
<div id='loading' class='ui-widget-content'> <p>Loading...<span class="ui-progressbar-value">.</span></p></div>
And the function that displays the lines depending on which line list you click on is this.
// LINE LIST CLICK EVENT
// Want user to be able to add list so made this live()
$(".list").live( 'click', function () {
// when user clicks on list, we only want to show lines in that list, hide all the others
var $listTarget = $(this);
$("#sideBar li").removeClass('ui-state-active');// remove last line highlight
$listTarget.addClass('ui-state-active');//add style to current list
//var allLines = $('li.line'); // find all lines
// decided better way is to target smaller amount of UL's to show or hide
var allLists = $('#linecontainer ul');// get all the UL's that the lines are inside
var thelistName = $listTarget.attr("id");
if(thelistName == "all_lines") {
//users wants to see all lines at once
allLists.show();
}
else {
//user wants only to see one list of lines
//build the selector that finds the ul list
//list id matches ul id but in Uppercase so both are unique
var TargetedList = '#' + thelistName.toUpperCase();
allLists.hide();
$(TargetedList).show();
}
});
I thought that using the id twice, once in upper case, and once in lower case was the problem so I tried having the sidebar list item id as "top_picks" and the associated container list as "top_picks-list" but still had the same problem.
I appreciate your input!
UPDATE I guess my title isn't really worded correctly. I have a jquery animation issue. I have a large number of list items(up to 300 in some cases) loaded by ajax, into the 8 different lists inside linecontainer div. The user can drag and drop the list item onto the sidebar to change which the list item belongs to.
The javascript I show here, handles determine which list the user clicked, and then hiding all list items, then showing only list items that belong to the desired list.
I thought it would be faster to target the 8 unordered lists on the page and animate those instead of finding all 300 list items on the page and animating those. Again firefox is fast at doing this but chrome, safari are way too slow. It must have to do with how the browsers finds the DOM elements.
I was able to reduce the problem to much simpler example in another question. It appears a bug might be in chrome. Here is link to other question.
加载中,请稍侯......
精彩评论