draggable拖拽和click点击相关的问题

Question

有一个需求就是，鼠标点击一侧的标签之后，这个标签会在添加到另一侧的数组里，而在此数组消失，如图

在标签上绑定了click事件，但是当标签到另一侧的时候，标签内部的click事件还是原来的事件，所以不会移回去。
这个应该怎么办？
而且点击完之后报了很多错误，之前的拖拽也不可以了

我是用vue写的，下面是部分代码

模板代码

<div class="custom_main_contents">
                    <div class="alreadypayattentionto_wrap">
                        <div class="custom_contents_title">
                            <span>已关注</span>
                        </div>
                        <div 
                            class="custom_contents" 
                            @drop="hasDrop($event)"
                              @dragover="hasDragOver($event)">
                              <draggable 
                                  v-model="follow_has_contents" 
                                  :options="{group:'people'}"
                                  class="custom_has_draggable">
                                <div
                                    class="custom_has_contents"
                                    v-for="(list,index) in follow_has_contents"
                                    draggable="true"
                                    @dragstart="hasDrag($event)"
                                    @click="joinHasContents($event,index)">
                                    <div class="contents_icon"></div>
                                    <div class="contents_main">
                                        <span>
                                            {{ list.name }}
                                        </span>
                                    </div>
                                </div>
                            </draggable>
                            <!-- 虚线框 -->
                            <div 
                                class="custom_has_contents"
                                v-show="showhasplacehoder">
                                <div class="content_placehoder"></div>
                            </div>
                            <div class="div_clear"></div>
                        </div>
                    </div>
                    <div class="notpayattentionto_wrap">
                        <div class="custom_contents_title">
                            <span>未关注</span>
                        </div>
                        <div 
                            class="custom_contents"
                            @drop="nohasDrop($event)"
                              @dragover="nohasDragOver($event)">
                              <draggable 
                                  v-model="follow_nohas_contents" 
                                  :options="{group:'people'}"
                                  class="custom_nohas_draggable">
                                <div
                                    class="custom_nohas_contents"
                                    v-for="(list,index) in follow_nohas_contents"
                                    draggable="true"
                                    @dragstart="nohasDrag($event)"
                                    @click="joinNoHasContents($event,index)">
                                    <div class="contents_icon"></div>
                                    <div class="contents_main">
                                        <span>
                                            {{ list.name }}
                                        </span>
                                    </div>
                                </div>
                            </draggable>
                            <!-- 虚线框 -->
                            <div 
                                class="custom_nohas_contents"
                                v-show="shownohasplacehoder">
                                <div class="content_placehoder"></div>
                            </div>
                            <div class="div_clear"></div>
                        </div>
                    </div>
                </div>

js部分代码

data(){
            return{
                follow_has_contents: [
                    { name: '我的导航' },
                    { name: '我的星座' }
                ],
                customNow: false,
                follow_nohas_contents: [
                    { name: '我的股票' },
                    { name: '我的小说' }
                ],
                dom: '',
                /* 虚框 */
                showhasplacehoder: false,
                shownohasplacehoder: false,
            }
        },
        methods: {
            /* 已关注的拖拽和释放 */
            // 在区域内释放时触发
            hasDrop: function(event){
                event.preventDefault(); // preventDefault()取消事件的默认动作
                // 隐藏所有的虚框
                this.shownohasplacehoder=false;
                this.showhasplacehoder=false;
            },
            // 在区域内触发
            hasDragOver: function(event){
                event.preventDefault(); // preventDefault()取消事件的默认动作
                this.showhasplacehoder=true; // 显示区域内的虚框
                this.shownohasplacehoder=false; // 隐藏区域外的虚框
            },

            /* 未关注的拖拽和释放 */
            // 在区域内释放时触发
            nohasDrop: function(event){
                event.preventDefault(); // preventDefault()取消事件的默认动作
                // 隐藏所有的虚框
                this.showhasplacehoder=false;
                this.shownohasplacehoder=false;
            },
            // 在区域内触发
            nohasDragOver: function(event){
                event.preventDefault(); // preventDefault()取消事件的默认动作
                this.shownohasplacehoder=true; // 显示区域内的虚框
                this.showhasplacehoder=false; // 隐藏区域外的虚框
            },

            /* 点击事件 */
            joinHasContents: function(event,index){
                this.dom = event.currentTarget;
                $('.custom_nohas_draggable').append(this.dom);
                $(this.dom).addClass('custom_nohas_contents');
                $(this.dom).removeClass('custom_has_contents');
            },
            joinNoHasContents: function(event,index){
                this.dom = event.currentTarget;
                $('.custom_has_draggable').append(this.dom);
                $(this.dom).addClass('custom_has_contents');
                $(this.dom).removeClass('custom_nohas_contents');
            }
        },

报错了

Answer 1

大概思路是在put中拿到拖拽的内容，然后保存成一个字段，在两边的框框中判断这个字段是否存在，存在则显示虚线框，内容就是你保存的字段，然后在end函数中清空字段。注意设置.sortable-chosen这个class的display为none

Answer 2

模板代码没有变，把点击事件修改了一下，思路和一楼大神说的一样，先往对侧的数组push添加元素，然后再splice删除元素。（vue数组的添加和删除在我的笔记里面有）这些工作都是通过索引index来完成的

 /* 点击事件 */
            joinHasContents: function(index){
                //this.dom = event.currentTarget;
                this.follow_nohas_contents.push({name: this.follow_has_contents[index].name}); // 给对侧的数组添加元素
                this.follow_has_contents.splice(index,1);
            },
            joinNoHasContents: function(index){
                //this.dom = event.currentTarget;
                this.follow_has_contents.push({name: this.follow_nohas_contents[index].name}); // 给对侧的数组添加元素
                this.follow_nohas_contents.splice(index,1);
            }