draggable拖拽相关的问题

Question

用draggable组件写了这部分功能，但是遇到了一些问题，请大神们指教

首先来说，这部分的需求是把一侧的标签拖拽到另一侧的数组中。
但是只能把标签拖到数组中才可以，如下图这样才可以

虚线框是绑定了一个动态的class属性，（:class="nowclicknohas===index ? 'custom_draggable' : ''"），当拖拽起的时候触发@dragstart="nohasDrag(index)"，把拖拽元素的索引赋值给变量nowclicknohas或nowclickhas，然后动态class属性是一个三元运算符进行判断。当释放拖拽的时候触发@drop="nohasDrop()"，把变量nowclicknohas或nowclickhas设置为空。

但是如果如下图的拖拽方法，没有拖拽到数组中，而是拖拽到了数组的下方，但是也在数组的div标签内。这样拖拽的话，拖住爱的数组就过不去，如下第二个图

我是用vue写的

模板代码

<div class="custom_main_contents">
                    <div 
                        class="alreadypayattentionto_wrap"
                        @drop="hasDrop()"
                          @dragover="hasDragOver()">
                        <div class="custom_contents_title">
                            <span>已关注</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>未关注</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: '我的导航' },
                    { name: '我的星座' }
                ],
                customNow: false,
                follow_nohas_contents: [
                    { name: '我的股票' },
                    { name: '我的小说' }
                ],
                dom: '',
                /* 虚框 */
                showhasplacehoder: false,
                shownohasplacehoder: false,
                nowclickhas: '',
                nowclicknohas: ''
            }
        },
        components: {
            dropfollow,
            draggable
        },
        methods: {
            /* 已关注的拖拽和释放 */
            // 拖拽元素时触发
            hasDrag: function(index){
                this.nowclickhas=index;
            },
            // 在区域内释放时触发
            hasDrop: function(){
                // 隐藏所有的虚框
                this.shownohasplacehoder=false;
                this.showhasplacehoder=false;
                this.nowclickhas='';
            },
            // 在区域内触发
            hasDragOver: function(){
                this.showhasplacehoder=true; // 显示区域内的虚框
                this.shownohasplacehoder=false; // 隐藏区域外的虚框
            },

            /* 未关注的拖拽和释放 */
            // 拖拽元素时触发
            nohasDrag: function(index){
                this.nowclicknohas=index;
            },
            // 在区域内释放时触发
            nohasDrop: function(){
                // 隐藏所有的虚框
                this.showhasplacehoder=false;
                this.shownohasplacehoder=false;
                this.nowclicknohas='';
            },
            // 在区域内触发
            nohasDragOver: function(){
                this.shownohasplacehoder=true; // 显示区域内的虚框
                this.showhasplacehoder=false; // 隐藏区域外的虚框
            },

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

Answer 1

自己已解决，谢谢各位。是外部div的宽高没有设置