views:

1002

answers:

2

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"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"&gt;&lt;/script&gt;

  <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.

+1  A: 

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!

redsquare
yeah, it's the bit after "unfortunately" i think that won't work here... i almost think i tried this route but i'll try it again. thanks
larson4
A: 

I'm working on a similar thing and this is how I did it below. Specifying the handle for the sorting seems to do the trick.

You may need to modify the css and javascript stuff to suit how you setup your environment.

<!doctype html>
<html lang="en">
<head>
    <title>jQuery UI Resizable - Default functionality</title>
    <link type="text/css" href="/jquery/css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="/jquery/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="/jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
    <style type="text/css">
     #draggable { border:solid 1px black; width: 75px; height: 150px; padding: 0.5em; }
     #resizable { border:solid 1px black; width: 75px; height: 150px; padding: 0.5em; }
     #resizable h3 { text-align: center; margin: 0; }
     #sortable { list-style-type: none; margin: 0; padding: 0; }
     #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; width: 100px; background-color:#CCC;border:solid 1px black;}
     </style>
     <script type="text/javascript">
     $(function(){$("#sortable").sortable({handle: 'span'});});
     $(function(){$("#item1").resizable();});
     $(function(){$("#item2").resizable();});
     $(function(){$("#item3").resizable();});
     </script>
    </head>
    <body>
    <div>
     <ul id="sortable">
      <li id="item1" class="ui-state-default"><span>Item 1</span></li>
      <li id="item2" class="ui-state-default"><span>Item 2</span></li>
      <li id="item3" class="ui-state-default"><span>Item 3</span></li>
     </ul>
    </div>
</body>
</html>