Search code examples
jqueryjquery-uiinternet-explorer-8jquery-ui-sortablejquery-ui-resizable

Jquery UI in IE8: suspending sort behavior while resizing an element that is sortable and resizable

I have a list of elements which I would like to make sortable and resizable using Jquery UI. Combining them works great in Chrome and Firefox. But in IE8 (both in normal and compatibility view), either behavior works great when used separately, but when combined, the resulting mixed behavior is undesirable.

My expectation is that resizing an element by dragging the resizable handles will not also activate sortable behavior and move that element. Unfortunately, when I drag on the resize areas of the element, it also drags the element as if I were moving it's sort position. I want the two behaviors to be exclusive. Here is 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 have tried several strategies for addressing this, including:

  1. The approach above, which attempts to disable the sortable when the resizing starts. Unfortunately this has no effect at all.
  2. Having the resizable's start function add a class to the item, and then having sortable filter by that class (e.g. $("#wrapper").sortable({items:".item:not(.resizing)"}); and $("#wrapper").sortable({items:".item", cancel:".resizing"}); )
  3. Several variations on what selectors get used for sortable and resizable
  4. Extensive googling, beating my head on my desk, and muttering in Microsoft's general direction.

Any help is greatly appreciated.

Solution

  • I worked around this by specifying the handle for the sortable and including a span within the div.

    Demo here.

    It means that unfortunately the whole element not is available to do the sort on but you can play with dimensions of the handle and work out a compromise!