Как реализовать задание «соотнести карточки»?

Question

[GizzaProger]

Вот так выглядит задание

Как мне можно получить карточку на которую перетащили другую карточку?
Есть идея как-то получить элемент под активной карточкой при событии mouseup, но как я не знаю.
Все написано на vue и делается через mousup и mousedown.

Answer 1

[0xD34F]

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

<div id="app" @dragover.prevent="">
  <button v-if="done" @click="init">ещё раз</button>
  <div v-else>
    <div class="questions">
      <div
        v-for="n in questions"
        :class="[ 'card', { hidden: n.done } ]"
        draggable="true"
        @dragstart="onDragStart($event, n)"
      >{{ n.question }}</div>
    </div>
    <div class="answers">
      <div
        v-for="n in answers"
        :class="[ 'card', { hidden: n.done } ]"
        @drop="onDrop(n)"
      >{{ n.answer }}</div>
    </div>
  </div>
</div>

SCSS

$side: 75px;

.questions,
.answers {
  width: $side * 3;
  height: $side * 3;
  margin: 10px;
  display: inline-block;
}

.card {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid silver;
  box-sizing: border-box;
  width: $side;
  height: $side;
  background: red;
  color: white;
  font-weight: bold;
  font-family: monospace;
}

.hidden {
  visibility: hidden;
}

JS

new Vue({
  el: '#app',
  data: () => ({
    dragged: null,
    items: [
      { question: '2 x 2', answer:  4 },
      { question: '5 x 6', answer: 30 },
      { question: '7 x 7', answer: 49 },
      { question: '8 x 4', answer: 32 },
      { question: '7 x 5', answer: 35 },
      { question: '6 x 9', answer: 54 },
      { question: '9 x 8', answer: 72 },
      { question: '6 x 8', answer: 48 },
      { question: '9 x 7', answer: 63 },
    ].map(n => (n.done = false, n)),
    questions: [],
    answers: [],
  }),
  computed: {
    done() {
      return this.items.every(n => n.done);
    },
  },
  methods: {
    onDragStart(e, item) {
      this.dragged = item;
    },
    onDrop(item) {
      if (item === this.dragged) {
        item.done = true;
      } else {
        alert('Ты дурак, да?');
      }
    },
    init() {
      const { items } = this;
      items.forEach(n => n.done = false);
      this.questions = [...this.items].sort(() => 0.5 - Math.random());
      this.answers = [...this.items].sort(() => 0.5 - Math.random());
    },
  },
  created() {
    this.init();
    document.addEventListener('dragend', () => this.dragged = null);
  },
});

https://jsfiddle.net/thd7avy2/

Comments

[GizzaProger]

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

[0xD34F]

не нашел способ стилизовать элемент при его перемещении

плохо искали

[GizzaProger]

0xD34F, По моему кроссбраузерность страдает из-за этого или я ошибаюсь?

[0xD34F]

GizzaProger, можно с минимальными переделками заставить работать в ie11.

Answer 2

[Stalker_RED]

https://developer.mozilla.org/en-US/docs/Web/API/D...