Использование jQueryUI для построения как вертикального, так и горизонтального интерфейса перетаскивания (включает почти работающий пример jsfiddle) - PullRequest
Новая
       19

Использование jQueryUI для построения как вертикального, так и горизонтального интерфейса перетаскивания (включает почти работающий пример jsfiddle)

0 голосов
/ 03 мая 2011

Я пытаюсь использовать jQueryUI для создания интерфейса перетаскивания, который позволяет горизонтальное и вертикальное перетаскивание.

Я создаю горизонтальные зоны размещения над, между и под любыми существующими строками. Я разрешаю вертикальное перетаскивание элементов с помощью jQueryUI Sortable. И я могу перетаскивать существующие элементы либо в новую строку, либо в существующую строку.

Я настроил этот jsfiddle с тем, что у меня есть: http://jsfiddle.net/travisrussi/DzS8d/2/

У меня есть следующие проблемы:

  1. Удаление второго элемента в новой строке в contentPane приводит к тому, что элемент визуально возвращается , даже если он удаляется успешно, а перетаскиваемый объект имеет 'revert', установленный в 'invalid'.

    • Шаги репликации (с использованием jsfiddle)
      • Перетащите Вариант 1 на панель содержимого.
      • Перетащите Вариант 2 в верхний ряд, который может быть сброшен (выше, где Вариант 1).
    • Ожидаемое поведение
      • После удаления варианта 2 визуально не следует возвращаться в исходное положение.

  1. Перетаскивание существующего элемента на панели содержимого приводит к его прыжку в верхний левый угол экрана.

    • Этапы репликации
      • Перетащите вариант 1 на панель содержимого.
      • Mousedown для варианта 1 в области содержимого.
    • Ожидаемое поведение
      • Mousedown в варианте 1 должен располагать вспомогательный элемент относительно курсора мыши.

Я выделил эту проблему здесь: Подключение Draggable к Sortable вызывает скачок вспомогательного элемента

  1. Удаление нового элемента в существующей строке с существующим элементом в contentPane приводит к дублированию нового элемента с одним новым элементом в существующей строке и одним новым элементом в новой строке выше. существующий ряд.

    • Этапы репликации

      • Перетащите вариант 1 на панель содержимого.
      • Перетащите опцию 2 в ту же строку, что и первый шаг.

    • Ожидаемое поведение

      • Вариант 2 должен быть добавлен только к существующей строке.

Есть идеи по любому из этих вопросов?

1 Ответ

3 голосов
/ 10 мая 2011

Я в основном перестроил интерфейс и заставил его работать должным образом.

Вот ссылка на рабочую демонстрацию, которая допускает как вертикальное, так и горизонтальное перетаскивание: http://jsfiddle.net/travisrussi/EGNWU/

В этой демонстрации я не пытаюсь показать / скрыть зоны падения по горизонтали (они просто остаются видимыми).

...