Пользовательский интерфейс Jquery в IE8: приостановка сортировки при изменении размера элемента, который можно сортировать и изменять по размеру

У меня есть список элементов, которые я хотел бы сделать сортируемыми и изменяющими размер с помощью пользовательского интерфейса Jquery. Их объединение отлично работает в 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>

Я пробовал несколько стратегий для решения этой проблемы, в том числе:

  1. Приведенный выше подход, который пытается отключить сортировку при запуске изменения размера. К сожалению, это ни на что не влияет.
  2. Наличие функции запуска изменяемого размера добавляет класс к элементу, а затем наличие сортируемого фильтра по этому классу (например, $("#wrapper").sortable({items:".item:not(.resizing)"}); и $ ("#wrapper").sortable({items:".item", cancel:".resizing"}); )
  3. Несколько вариантов того, какие селекторы используются для сортировки и изменения размера.
  4. Обширное гугление, биение головой о стол и бормотание в общем направлении Microsoft.

Любая помощь приветствуется.


jquery jquery-ui jquery-ui-resizable jquery-ui-sortable internet-explorer-8
person jwl    schedule 09.07.2009    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я обошел это, указав дескриптор для сортируемого и включив диапазон в div.

Демо здесь.

Это означает, что, к сожалению, весь элемент не доступен для сортировки, но вы можете поиграть с размерами ручки и найти компромисс!

person redsquare    schedule 09.07.2009
comment
да, это немного позже, к сожалению, я думаю, что это не сработает здесь ... я почти думаю, что пробовал этот маршрут, но я попробую еще раз. Спасибо - person jwl; 13.07.2009
comment
Вздох Еще один ответ потерян из-за гниения ссылок. Опубликуйте ссылку для потомков! - person ToastyMallows; 19.09.2014
comment
@toasttmallows шокирует ужас, как это было 4 с лишним года назад - person redsquare; 22.09.2014

arrow_upward
0
arrow_downward

Я работаю над похожей вещью, и вот как я это сделал ниже. Указание дескриптора для сортировки, кажется, помогает.

Возможно, вам придется изменить материалы 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>
person Community    schedule 16.07.2009