sortable IE 7 bug when scroll bar
I'm having a problem using jQuery UI - v1.10.4 for
sortables. In IE7, when a <ul> becomes too big within a <div> and
scrolling is availble, I am unable to sort the list. When I try to
sort it,It not works (i think problem in getting offset height of place holder).
Anyone have seen this before or have any idea what the deal might be?
It works fine in FF and other browsers.
Cheers!
sortables. In IE7, when a <ul> becomes too big within a <div> and
scrolling is availble, I am unable to sort the list. When I try to
sort it,It not works (i think problem in getting offset height of place holder).
Anyone have seen this before or have any idea what the deal might be?
It works fine in FF and other browsers.
Cheers!
sample:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="/js/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortabler { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortabler li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortabler li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$("#sortabler").sortable({scroll: false});
$("#sortabler").disableSelection();
$("#sortabler").droppable({
drop: function(ev, ui) {
$(ui.draggable).html("dropped");
}
});
});
function log(val) {
document.getElementById("id").innerHTML += "<br>" + val
}
</script>
</head>
<body >
<div style="height: 1400;"></div>
<ul id="sortabler" style="position: relative" >
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<p id="id">log</p>
</body>
</html>