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

Question

Я провел несколько часов, пытаясь выяснить сценарий.Поскольку я не пытаюсь сделать то же самое, что перетаскивание, вот почему у меня проблемы.

У меня есть 3 имени1, 2, 3, в качестве пробелов для изображений A, B и C. Я хочу иметь возможность поместить A, B, C в деления 1, 2, 3 двумя способами, такими как: (1) Нажмите 1 и затемнажмите A, затем A будет помещен в 1. (2) Нажмите A, а затем нажмите 1, затем A будет помещен в 1.

Я пытался имитировать перетаскивание html5, но это не такхорошо работать.

<template>
  <div class="container">
    <div v-for="n in 3" :key="n">{{n}}</div>
    <div v-for="n in arr" :key="n">{{n}}</div>
  </div>
</template>

<script>

export default {
  name: 'MyComponent',
  data () {
    return {
      arr: ['A', 'B', 'C']
    }
  }
}
<style scoped>
    .container div{
        border: 1px solid black;
    }
</style>

Answer 1

У вас должно быть два массива в качестве свойств в вашем объекте данных: один с именем arrAlpha, который содержит буквы, и другой с именем arrNum, который содержит числа, при нажатии на элемент массива вы обновите свойство с именем selectedItemс помощью метода move, если он равен null, он меняет значения.

new Vue({
  el: '#app',

  data() {
    return {
      arrAlpha: ['A', 'B', 'C'],
      arrNum: [1, 2, 3],
      selectedItem: null
    }
  },
  methods: {
    move(n, src) {
      if (this.selectedItem == null) {
        this.selectedItem = n;
      }
      else if (src === 'num') {
        this.arrNum[this.arrNum.indexOf(n)] = this.arrAlpha[this.arrAlpha.indexOf(this.selectedItem)];
        this.arrNum = this.arrNum.slice();
        this.selectedItem = null;
      } else {
        this.arrAlpha[this.arrAlpha.indexOf(n)] = this.arrNum[this.arrNum.indexOf(this.selectedItem)];
        this.arrAlpha = this.arrAlpha.slice();
        this.selectedItem = null;

      }


    }
  }
})

.container div{
        border: 1px solid black;
 
        
    }
    
    .row{
    display:flex;
    flex-direction:row;
    padding:10px;
    }
    .row div {
    cursor:move;
    width:40px;
    padding:5px;
    }

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
   <div id="app" class="container">
        <div class="row">
            <div v-for="n in arrNum"  @click="move(n,'num')">{{n}}</div>
        </div>
        <div class="row">
            <div v-for="a in arrAlpha"  @click="move(a,'alpha')">{{a}}</div>
        </div>

    </div>