Пользовательский интерфейс Jquery в IE8: приостановка поведения сортировки при изменении размера сортируемого и изменяемого размера элемента - PullRequest
Новая
       12

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

3 голосов
/ 09 июля 2009

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

Любая помощь очень ценится.

Ответы [ 2 ]

2 голосов
/ 09 июля 2009

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

Демо здесь .

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

0 голосов
/ 16 июля 2009

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

Возможно, вам придется изменить материал CSS и JavaScript, чтобы он соответствовал вашей настройке.

...