Стилизация элементов Vuedraggle - PullRequest
Новая
       76

Стилизация элементов Vuedraggle

0 голосов
/ 19 июня 2020

Я использую vuedraggable для создания доски kanban (как в Trello), и она работает нормально, но я застрял в ее стилизации так, как я хочу.

На самом деле я бы хотел бы иметь такую ​​анимацию ( LINK ):

enter image description here

Итак, я хочу иметь возможность:

  • Переместите саму карту, а не какую-то ее теневую копию
  • Создайте стиль для заполнителя перетаскивания следующим образом.

Какие классы я должен стремиться изменить (с css)? На мой взгляд, в документации не очень ясно.

Заранее спасибо!

1 Ответ

0 голосов
/ 21 июня 2020

Вы хотите сделать пару вещей. Призрачное изображение по умолчанию - это то, что браузер делает по умолчанию. Однако мы не можем сделать это непрозрачным, поэтому хотим от него избавиться. Для этого прослушайте событие dragstart и установите для перетаскиваемого изображения пустое изображение: 

event.dataTransfer.setDragImage(new Image(), 0, 0);

Теперь, когда это у нас есть, нам нужно создать перетаскиваемое изображение. Чтобы получить представление о том, где будет брошен предмет, и о фактической карте, которую вы бросаете, я думаю, вам лучше всего просто продублировать карту, которая перемещается во временный контейнер, которым вы можете манипулировать. Затем вы выясняете, где находится мышь, и перемещаете временный контейнер. В конце вы хотите удалить временную карту, чтобы случайная карта не оказалась где-то на экране.

Ваш шаблон будет выглядеть примерно так: 

<draggable v-model="items" animation="150">
  <div
    v-for="item in items"
    :key="item"
    class="item"
    @dragstart="dragStartHandler"
    @dragend="dragEndHandler"
    @drag="dragHandler"
  >{{ item }}</div>
</draggable>

<div class="drag-preview" :style="dragStyle" ref="dragPreview"></div>

Мы можем использовать dragstart и dragend как для установки пустого заполнителя, так и для добавления и удаления дублированной карты. 

dragStartHandler(e) {
  this.dragPreview = e.target.cloneNode(true);
  this.$refs["dragPreview"].appendChild(this.dragPreview);

  e.dataTransfer.setDragImage(new Image(), 0, 0);
},

dragEndHandler() {
  this.dragPreview.remove();
  this.dragPreview = null;
},

Событие drag - это расширенное событие MouseEvent, которое имеет координаты экрана и страницы. Мы слушаем его, чтобы выяснить, где находится мышь, и просто обновляем некоторые переменные с их помощью. 

dragHandler(e) {
  this.x = e.pageX;
  this.y = e.pageY;
}

Затем вы можете вычислить свои верхние и левые координаты, просто добавив к ним px 

dragStyle() {
  return {
    top: `${this.y}px`,
    left: `${this.x}px`
  };
}

Чтобы стилизовать все это, элемент, который в настоящее время сортируется, по умолчанию имеет класс sortable-ghost. В моем случае я просто выделил ему серый пунктирный контур и установил font-size равным 0, чтобы скрыть текст. 

.sortable-ghost {
  border: 1px dashed grey;
  font-size: 0;
  overflow: hidden;
}

Класс drag-preview - это то, что следует за курсором мыши. Конечно, когда вы ничего не тащите, там ничего нет. В вашем примере показана слегка наклоненная карточка, поэтому мы переводим карточку на 50% вверх и влево, чтобы она находилась по центру мыши. Затем мы слегка поворачиваем его на 7 градусов. Наконец, мы перемещаем его вниз на 55%, чтобы он не пересекался с нашей мышью. 

.drag-preview {
  position: absolute;
  transform: translateX(-50%) translateY(-50%) rotate(7deg) translateY(55%);
}

Редактировать стили для элементов Vuedraggable

...