Как изменить HTML-код элемента-клона при перетаскивании с помощью перетаскивания? - PullRequest
Новая
       21

Как изменить HTML-код элемента-клона при перетаскивании с помощью перетаскивания?

0 голосов
/ 18 февраля 2019

Я использую Dragable для перетаскивания и пытаюсь понять, как я могу изменить клонированный элемент HTML в начале перетаскивания и до того, как он упал. 

<div id="main">
  <h1>Vue Draggable</h2>           
  <div class="drag">
    <h2>List 1 Draggable</h2>
      <draggable :list="list" :clone="clone" class="dragArea" :options="{group:{ name:'people',  pull:'clone', put:false }}">
        <div v-for="(element, index) in list" :key="index">        
        {{element.name}}     
        </div>
      </draggable>
    <h2>List 2 Draggable</h2>
      <draggable :list="list2" class="dragArea" :options="{group:'people'}">
        <div v-for="(element, index) in list2" :key="index" @click="click(element)">{{element.name}}</div>
      </draggable>
  </div>

     <div class="normal">
            <h2>List 1 v-for</h2>
            <div>
                <div v-for="element in list">{{element.name}}</div>
             </div>
            <h2>List 2 v-for</h2>
            <div>
                <div v-for="element in list2">{{element.name}}</div>
            </div>
        </div>
</div>

Но я не вижу вклонировать сам HTML, только внутренний текст, который я перетаскиваю: 

var vm = new Vue({
  el: "#main",
  data: {
    list: [{
      name: "John"
    }, {
      name: "Joao"
    }],
    list2: [{
      name: "Juan"
    }, {
      name: "Edgard"
    }]
  },
  methods: {
    click: function(item) {
        item.name="IT GETS CLONED";
    },
    clone: function(el){
        return {
        name: "new text";
      };
    }
  }
});

Что мне здесь не хватает?Разве клон не дает мне новый элемент HTML, с которым я могу работать?

Я пытался работать с этим простым примером

...