I've just upgraded to jQ 1.5 and jQUI 1.8.9 and my sortables have started behaving very oddly. I've got linked sortables and when I drag items across they randomly seem to stop and it generally seems flaky. Are there any changes required by the upgrade?
UPDATE -- Getting a number of errors in the JQuery UI js file
Cannot read property 'sortables' of undefined on line 1504 Cannot read property options of undefined on line 1585 and 1627 Cannot read property 'element' of undefined on 1461
UPDATE -- Here's a minimal example
Instructions: Drag an item from the red box (draggables) over the first blue sortable box and into the second blue sortable box. The drag should terminate when trying to mouse into the second box.
It seems jquery ui is not necessarily at fault here, changing the jquery reference to 1.4.4 fixes the issue so I think this may be a problem in jquery itself, specifically with some changes to the data api.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/dark-hive/jquery-ui.css" rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$('.sortable').sortable({ connectWith: '.sortable' }).disableSelection();
$('.draggable>div').draggable({ connectToSortable: '.sortable' });
});
</script>
</head>
<body>
<style>
.draggable { border: 1px solid red; margin-bottom: 15px; width: 50%; padding: 5px;}
.sortable { border: 1px solid blue; margin-bottom: 15px; width: 50%; padding: 5px;}
</style>
<div id="draggers" class="draggable">
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Drag 1</div>
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Drag 2</div>
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Drag 3</div>
</div>
<div id="sortable" class="sortable">
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Sort 1</div>
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Sort 2</div>
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Sort 3</div>
</div>
<div id="sortable2" class="sortable">
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Sort 4</div>
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Sort 5</div>
<div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Sort 6</div>
</div>
</body>
It seems that jquery 1.5 and jquery 1.8.9 are not supported together. In this case the .clone method in 1.5 clones events which it didn't do before and a fix is ready for 1.5.1. jquery ticket