IE8 中的 Jquery UI：在调整可排序和可调整大小的元素大小时暂停排序行为答案

【问题标题】：Jquery UI in IE8: suspending sort behavior while resizing an element that is sortable and resizableIE8 中的 Jquery UI：在调整可排序和可调整大小的元素大小时暂停排序行为
【发布时间】：2009-07-09 17:55:58
【问题描述】：

我有一个元素列表，我想使用 Jquery UI 对其进行排序和调整大小。将它们结合起来在 Chrome 和 Firefox 中效果很好。但在 IE8（普通视图和兼容性视图）中，任何一种行为单独使用时效果都很好，但组合使用时，产生的混合行为是不可取的。

我的期望是通过拖动可调整大小的手柄来调整元素的大小不会也激活可排序行为并移动该元素。不幸的是，当我拖动元素的调整大小区域时，它也会拖动元素，就好像我在移动它的排序位置一样。我希望这两种行为是排他的。这是复制行为的代码：

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

我尝试了几种策略来解决这个问题，包括：

上面的方法，它试图在调整大小开始时禁用可排序。不幸的是，这根本没有效果。
让可调整大小的启动函数向项目添加一个类，然后按该类进行可排序过滤器（例如 $("#wrapper").sortable({items:".item:not(.resizing)"}） ; 和 $("#wrapper").sortable({items:".item", cancel:".resizing"}); )
选择器用于可排序和可调整大小的几个变体
广泛的谷歌搜索，在我的办公桌上敲打我的头，并在微软的大方向上喃喃自语。

非常感谢任何帮助。

【问题讨论】：

标签： jquery jquery-ui internet-explorer-8 jquery-ui-sortable jquery-ui-resizable

【解决方案1】：

我通过指定可排序的句柄并在 div 中包含一个跨度来解决此问题。

演示here。

这意味着不幸的是，整个元素无法进行排序，但您可以调整手柄的尺寸并做出妥协！

【讨论】：

是的，这是“不幸的是”之后的一点，我认为这在这里行不通……我几乎认为我尝试过这条路线，但我会再试一次。谢谢
Sigh 链接腐烂的另一个答案丢失了。为后代发布链接内容！
@toasttmallows 震惊恐怖，就像 4 年前一样

【解决方案2】：

我正在做类似的事情，这就是我在下面做的。指定排序的句柄似乎可以解决问题。

您可能需要修改 css 和 javascript 内容以适应您设置环境的方式。

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

【讨论】：