用draggable組件寫了這部分功能，但是遇到了一些問題，請大神們指教

首先來說，這部分的需求是把一側(cè)的標(biāo)簽拖拽到另一側(cè)的數(shù)組中。
但是只能把標(biāo)簽拖到數(shù)組中才可以，如下圖這樣才可以

虛線框是綁定了一個動態(tài)的class屬性，（:class="nowclicknohas===index ? 'custom_draggable' : ''"），當(dāng)拖拽起的時候觸發(fā)@dragstart="nohasDrag(index)"，把拖拽元素的索引賦值給變量nowclicknohas或nowclickhas，然后動態(tài)class屬性是一個三元運算符進行判斷。當(dāng)釋放拖拽的時候觸發(fā)@drop="nohasDrop()"，把變量nowclicknohas或nowclickhas設(shè)置為空。

但是如果如下圖的拖拽方法，沒有拖拽到數(shù)組中，而是拖拽到了數(shù)組的下方，但是也在數(shù)組的div標(biāo)簽內(nèi)。這樣拖拽的話，拖住愛的數(shù)組就過不去，如下第二個圖

我是用vue寫的

模板代碼

<div class="custom_main_contents">
                    <div 
                        class="alreadypayattentionto_wrap"
                        @drop="hasDrop()"
                          @dragover="hasDragOver()">
                        <div class="custom_contents_title">
                            <span>已關(guān)注</span>
                        </div>
                        <div 
                            class="custom_contents">
                              <draggable 
                                  v-model="follow_has_contents" 
                                  :options="{group:'people'}"
                                  class="custom_has_draggable">
                                <div
                                    class="custom_has_contents"
                                    :class="nowclickhas===index ? 'custom_draggable' : ''"
                                    v-for="(list,index) in follow_has_contents"
                                    draggable="true"
                                    @dragstart="hasDrag(index)"
                                    @click="joinHasContents(index)">
                                    <div class="contents_icon"></div>
                                    <div class="contents_main">
                                        <span class="contents_main_text">
                                            {{ list.name }}
                                        </span>
                                    </div>
                                </div>
                            </draggable>
                            <div class="div_clear"></div>
                        </div>
                    </div>
                    <div 
                        class="notpayattentionto_wrap"
                        @drop="nohasDrop()"
                          @dragover="nohasDragOver()">
                        <div class="custom_contents_title">
                            <span>未關(guān)注</span>
                        </div>
                        <div 
                            class="custom_contents">
                              <draggable 
                                  v-model="follow_nohas_contents" 
                                  :options="{group:'people'}"
                                  class="custom_nohas_draggable">
                                <div
                                    class="custom_nohas_contents"
                                    :class="nowclicknohas===index ? 'custom_draggable' : ''"
                                    v-for="(list,index) in follow_nohas_contents"
                                    draggable="true"
                                    @dragstart="nohasDrag(index)"
                                    @click="joinNoHasContents(index)">
                                    <div class="contents_icon"></div>
                                    <div class="contents_main">
                                        <span class="contents_main_text">
                                            {{ list.name }}
                                        </span>
                                    </div>
                                </div>
                            </draggable>
                            <div class="div_clear"></div>
                        </div>
                    </div>
                </div>

js部分代碼

data(){
            return{
                follow_has_contents: [
                    { name: '我的導(dǎo)航' },
                    { name: '我的星座' }
                ],
                customNow: false,
                follow_nohas_contents: [
                    { name: '我的股票' },
                    { name: '我的小說' }
                ],
                dom: '',
                /* 虛框 */
                showhasplacehoder: false,
                shownohasplacehoder: false,
                nowclickhas: '',
                nowclicknohas: ''
            }
        },
        components: {
            dropfollow,
            draggable
        },
        methods: {
            /* 已關(guān)注的拖拽和釋放 */
            // 拖拽元素時觸發(fā)
            hasDrag: function(index){
                this.nowclickhas=index;
            },
            // 在區(qū)域內(nèi)釋放時觸發(fā)
            hasDrop: function(){
                // 隱藏所有的虛框
                this.shownohasplacehoder=false;
                this.showhasplacehoder=false;
                this.nowclickhas='';
            },
            // 在區(qū)域內(nèi)觸發(fā)
            hasDragOver: function(){
                this.showhasplacehoder=true; // 顯示區(qū)域內(nèi)的虛框
                this.shownohasplacehoder=false; // 隱藏區(qū)域外的虛框
            },

            /* 未關(guān)注的拖拽和釋放 */
            // 拖拽元素時觸發(fā)
            nohasDrag: function(index){
                this.nowclicknohas=index;
            },
            // 在區(qū)域內(nèi)釋放時觸發(fā)
            nohasDrop: function(){
                // 隱藏所有的虛框
                this.showhasplacehoder=false;
                this.shownohasplacehoder=false;
                this.nowclicknohas='';
            },
            // 在區(qū)域內(nèi)觸發(fā)
            nohasDragOver: function(){
                this.shownohasplacehoder=true; // 顯示區(qū)域內(nèi)的虛框
                this.showhasplacehoder=false; // 隱藏區(qū)域外的虛框
            },

            /* 點擊事件 */
            joinHasContents: function(index){
                this.follow_nohas_contents.push({name: this.follow_has_contents[index].name}); // 給對側(cè)的數(shù)組添加元素
                this.follow_has_contents.splice(index,1);
            },
            joinNoHasContents: function(index){
                this.follow_has_contents.push({name: this.follow_nohas_contents[index].name}); // 給對側(cè)的數(shù)組添加元素
                this.follow_nohas_contents.splice(index,1);
            }
        }