wrote this part of the function with draggable component, but encountered some problems, ask the gods to advise

first of all, the requirement for this part is to drag the label on one side to the array on the other side.
but you can only drag the tag to the array, as shown in the following figure so that you can

class:class="nowclicknohas===index ? "custom_draggable" : """@dragstart="nohasDrag(index)"nowclicknohasnowclickhasclass@drop="nohasDrop()"nowclicknohasnowclickhas

div

I wrote it in vue

template code

<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 partial code

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);
            }
        }