Effect chart

vue code, where the buttons and bomb frames are used in Elementui components

<TEMPlate> 
     <div> 
         <el-button type = "primary" @click = "Plansetmodal = TRUE"> Add position </El-Button> 
         <el-dialog: fullscreen = "true" el-dialog title = "Add position": visible.Sync = "Plansetmodal">> 
             <div class = "posity_set_content"> 
                 <div class = "posity_set_left"> 
                     <div @mousedown = "handlemoveicon"> 
                     <IMG SRC = "@/Assets/LOCATION.PNG" ALT = ""/> 
                     <div class = "posity_set_tips"> 
                         <div> <b> Coordinates: </b> ({{positionX - 200}}, {
   {positiony}}) </div> 
                         <div> <b> Tip: </b> Hold down and drag up the positioning icon, move to the right place, click to put it down, click the OK button </div> 
                     </div> 
                     </div> 
                    
                 </div> 
                 <div class = "posity_set_right"> 
                     <img src = "@/assets/1F.png" alt = ""/> 
                 </div> 
             </div> 
             <div slot = "title"> 
                 <el-button type = "primary" @click = "submitposition"> OK </El-Button> 
             </div> 
             </El-Dialog> 
     </div> 
 </template> 
 <script> 
 export default { 
     Data () {) {) 
         Return { 
             Plansetmodal: false, 
             positionx: 0, 
             positiony: 0, 
             Form: {} 
         } 
     }, 
     Methods: { 
         handlemoveicon (e) { 
             let oDiv = e.Target; // Get target elements 
             // Calculate the position of the relative element of the mouse 
             let disx = e.clientx -odiv.offsetLeft; 
             let dispnse = e.clitingy -odiv.offsettop; 
             document.onmousemove = (e) => {// Mouse presses and move 
                 // Use the position of the mouse to subtract the position of the mouse's opposite element and get the position of the element 
                 let left = e.clientx -disx; 
                 Let top = e.clienty -dispity; 
                 // Binded element positions to PositationX and PositiveY 
                 this.positionx = left; 
                 this.positiony = Top; 
                 // Mobile current elements 
                 odiv.style.left = left + 'px'; 
                 odiv.style.top = top + 'px'; 
             }; 
             document.onmouseup = (e) => {{ 
                 document.onMousemove = NULL; 
                 document.onmouseup = null; 
             }; 
         }, 
         submitposition () {// OK 
         // The position is the position of the icon for the position in the picture. The right side of the picture is 200px. The minus is the relative X coordinate in the figure. 
             this.Form.LocationX = this.positionx -200 
             this.Form.Locationy = this.positiony 
             this.plaansetmodal = false 
         }, 
     }, 
 } 
 </script> 
 <STYLE Scopeed Lang = "SCSS"> 
 .pOSITION_SET_CONTENT { 
     position: Relative; 
     display: flex; 
     .posphere_Set_left { 
         position: Relative; 
         width: 200px; 
         img { 
             pose: absolute; 
             TOP: 0: 
             left: 0; 
             height: 40px; 
             cursor: pointer; 
         } 
         .position_Set_tips { 
           margin-top: 50px; 
           div: nth-child (2) {{ 
             margin-top: 10px; 
             font-size: 14px; 
             color: RGB (48, 116, 241); 
           } 
         } 
     } 
     .pOSITION_SET_RIGHT { 
         width: 1500px; 
         img { 
             width: 100%; 
         } 
     } 
 } 

 </style>