as shown in the picture, the drag and drop tag will not exceed the area of the external tag. I wrote it in vue and looked up the draggable component on the Internet
. 
the code is as follows
template
<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"}"
@handledraggable="handleDraggable($event)"
class="custom_nohas_draggable">
<div
class="custom_nohas_contents"
:class="[nowclicknohas===index ? "custom_draggable" : "",nohashover===index ? "custom_nohas_hover" : ""]"
v-for="(list,index) in follow_nohas_contents"
draggable="true"
@dragstart="nohasDrag(index)"
@click="joinNoHasContents(index)"
@mouseenter="nohashover=index"
@mouseleave="nohashover=""">
<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>js part
/* */
//
nohasDrag: function(index){
this.nowclicknohas=index;
console.log("nohasDrag")
},
//
nohasDrop: function(){
this.nowclickhas="";
this.nowclicknohas="";
console.log("nohasDrop")
},
//
nohasDragOver: function(){
console.log("nohasDragOver")
},ask for advice from the Great God on drag and drop constraints