javascript - 如何进行V型零件的拖放？(How can I make a v-for component drag and drop?)

Question

I have a list of questions that I need to be rearrangeable via drag and drop, but that list populates with a v-for and I'm not sure how to target each individual instance with that being the case.

(我有一个问题列表，需要通过拖放来重新排列，但是该列表中填充了v-for，我不确定在这种情况下如何针对每个实例。)

Here's my html snippet:

(这是我的html代码段：)

<div id="drag" ondrop="drop(event)" ondragover="allowDrop(event)">
    <QuestionComponent
      draggable="true"
      ondragstart="drag(event)"
      v-for="question in this.$store.state.questions"
      :key="question.poll"
      :questionProp="question"
    />
  </div>

and here's the javascript I have behind it running the drag and drop specifically:

(这是我后面专门运行拖放的javascript：)

allowDrop(ev) {
      ev.preventDefault();
    },

    drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
    },

    drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
    }

  ask by Peyton Sonnefeld translate from so

Answer 1

等待大神答复