Vue.Draggable удалить элемент, перетаскивая в обозначенную область

Question

Я бился головой о стену, пытаясь понять это. Я нашел пример того, что именно я пытаюсь сделать через репозиторий Sortable.js, здесь, но я не смог реализовать его с помощью Vue.Draggable.

Моя теория о том, как это сделать, это добавить <draggable/> элемент, который находится в том же group как остальные элементы и слушать @add событие, затем удалите этот перетаскиваемый элемент из списка.

Одна ошибка (может быть), я пытаюсь назначить кнопку "мусор" в качестве области удаления, и если она ссылается на тот же перетаскиваемый group, этот перетаскиваемый элемент добавляется к группе кнопок и сбрасывает весь пользовательский интерфейс. Итак, действительно важно то, что есть какая-то обратная связь с пользователем (например, значок корзины становится красным при наведении курсора на элемент перетаскивания), но перетаскиваемый элемент не должен вставляться в группу кнопок.

Начальное состояние перетаскивания

Намеренное удаление

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

Answer 1

Позволяет решить некоторые проблемы по очереди:

Как я могу позволить мусорному перетаскиваемому принять любую группу

Ответ на это, чтобы установить pull а также push атрибута группы.

  trashOptions: {
    group: {
      name: 'trash',
      draggable: '.dropitem',
      put: () => true,
      pull: false
    }
  }

Установив put к функции, которая всегда возвращает true, она примет любую группу. В качестве альтернативы вы можете установить его в массив с группами, из которых вы принимаете.

Как я могу предотвратить запутывание моей кнопки при установке ее в качестве перетаскиваемой области

Самый простой способ - установить вставленный элемент в display: none, Вы можете просто спрятать все, что вы установите в качестве draggable атрибут или использовать ghostClass установка (согласно документации).

Как я могу дать обратную связь с пользователем?

Этот хитрый. Draggable не устанавливает класс в перетаскиваемой области, которую вы используете. Однако вы можете использовать умный селектор CSS, чтобы добиться того, чего вы хотите. Сначала мы определим нижний колонтитул.

<draggable v-model="trashZone" class="dropzone trashzone" :options="trashOptions">
  <div slot="footer" class="footer">Trash</div>
</draggable>

Мы позиционируем этот абсолют в капельной зоне и следим за тем, чтобы он охватывал все это. Добавленные элементы теперь всегда будут отображаться перед нижним колонтитулом. Это здорово, потому что мы можем использовать следующий селектор (+), чтобы выбрать нижний колонтитул после вставленного элемента и применить другой стиль. В этом случае мы применяем красный фон и делаем текст белым.

.trashzone .footer {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.trashzone .dropitem + .footer {
  background: red;
  color: white;
}

Полный рабочий пример доступен на codeandbox.