Оптимизация внешнего интерфейса с перетаскиванием компонентов

внешний интерфейс

Почему API перетаскивания Html5 устарел

  • Я также использовал Drag Api для написания перетаскиваемого компонента раньше, и я всегда чувствовал, что при его использовании было немного плохо.
  • Давайте сначала посмотрим на аналогичные компоненты пользовательского интерфейса перетаскивания, созданные Youzan.Библиотека sortablejs, на которую он ссылается, инкапсулирует Drag Api.

  • 1. При перетаскивании следуйте за тенью мыши, чтобы стать призраком, который автоматически генерируется API. Но поскольку это очень простая страница, фон весь белый, и при перетаскивании трудно увидеть, куда он перетаскивается. Хотя API предоставляет нам метод e.dataTransfer.setDragImage(img, 0, 0) для изменения призрака, набор img должен быть элементом img HTML, элементом холста HTML, в противном случае он должен быть видимым узлом. Проще говоря, если призрак, который вы установили, является не элементом canvas или img, а вашим пользовательским элементом html, вы должны добавить его в документ.
    document.getElementById("drag-with-create-add").addEventListener("dragstart", function(e) {
        var crt = this.cloneNode(true);
        crt.style.backgroundColor = "red";
        document.body.appendChild(crt);
        e.dataTransfer.setDragImage(crt, 0, 0);
    }, false);
  • Этот метод, кажется, решает проблему незаметного перетаскивания, но набор призраков по умолчанию имеет прозрачность, и у вас нет возможности изменить эту прозрачность. На странице, показанной выше, даже элемент cloneNode следует за мышью, по этой причине он имеет смутное ощущение.
  • 2. При быстром перетаскивании элементы постоянно перекомпоновываются и перерисовываются.

  • Как видно из приведенного выше рисунка, порядок DOM постоянно меняется при перетаскивании и сортировке.Хотя и говорится, что страница была загружена при перетаскивании, эти накладные расходы не окажут большого влияния, но если это можно сделать один раз, то только Конечно, лучше всего один раз изменить структуру DOM.
  • 3. Перетаскивание примера не имеет анимационного эффекта, и призрак следует за ощущением, что его очень тяжело перетаскивать, что немного трудоемко. Эта проблема не придирка, она может быть отражена в оптимизированной анимации перетаскиваемого компонента позже.

Более плавное перетаскивание с помощью событий мыши

  • Перетаскивание после оптимизации явно намного плавнее, чем в примере, и ощущения перетаскивания не будет.

  • существуетпроцесс перетаскиванияВ , как бы вы ни перетаскивали, меняется только перевод элемента, и не вызывает изменений в структуре DOM, а перевод не вызывает перекомпоновку и перерисовку, а только выполняет сортировку обновления после окончания перетаскивания. Текущий перетаскиваемый элемент также может быть четко виден во время процесса перетаскивания.
  • Информацию о CSS, влияющем на поток документов, перекомпоновку и перерисовку, см.docs.google.com/sprea...

Идеи оптимизации

  • Устарело перетаскивание html5, вместо этого используйте событие мыши
  • При наведении мыши элемент, на который в данный момент нажимает клон, становится призраком, а видимость исходного элемента: скрытая; видимость заставляет исходный элемент по-прежнему занимать позицию, что является ключом к тому, чтобы не изменять дом во время перетаскивания.
  • Установите фиксированное положение призрака вне потока документа, чтобы независимо от того, как вы перетаскиваете его, он не влиял на макет.
  • Добавьте в окно события mousemove и mouseend, чтобы фантом плавно следовал независимо от того, как движется мышь. Когда mousemove оценивает положение призрака и других элементов, используйте только перевод, чтобы изменить его, и он не будет отсортирован до конца фактического перетаскивания.
  • Оптимизированный пользовательский призрак позволяет людям четко видеть движущиеся элементы.

Исходный код, используемый с vue:GitHub.com/Sally2015/…С помощью простого списка двусторонней привязки данных v-model

Категории