I have a list of elements that I would like to make sortable and resizable using jQuery UI. Combining them works fine in Chrome and Firefox. But in IE8 (both in normal mode and in compatibility mode), any behavior works fine when used separately, but when combined, the resulting mixed behavior is undesirable.
My expectation is that resizing an element by dragging and dropping resizable handles will also not activate the sortable behavior and move that element. Unfortunately, when I drag the element’s resizing areas, it also drags the element as if I were moving its sort position. I want both behaviors to be exclusive. Here is the code that replicates the behavior:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>
<style type="text/css">
.item { width: 200px; height: 20px; border: 1px solid gray; float: left; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".item").resizable({
start:function() {
$("#wrapper").sortable("disable");
},
stop:function() {
$("#wrapper").sortable("enable");
}
});
$("#wrapper").sortable({
items:".item"
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="item">a</div><div class="item">b</div><div class="item">c</div><div class="item">d</div>
</div>
</body>
</html>
I tried several strategies to solve this problem, including:
- The above approach, which tries to disable sorting when resizing starts. Unfortunately, this has no effect.
- (, $( "# wrapper" ). sortable ({items: ". item: not (.resize)" }) $( "# wrapper" ). sortable ({items: ". item", cancel: ". resizing" });)
- googling, Microsoft.
.