Element Example code for implementing drag and drop function in el-dialog in UI

The dialog component in element UI is often used. It would be better if it can be dragged and dropped to different locations at will. The implementation method is as follows:

Code：
import Vue from 'vue'  
// v-dialogDrag: Pop-up window drag('dialogDrag', { 
  bind(el, binding, vnode, oldVnode) { 
    const dialogHeaderEl = ('.el-dialog__header') 
    const dragDom = ('.el-dialog') 
     = 'move' 
 
    // Get the original attribute ie dom element.currentStyle Firefox Google (dom element, null);    const sty =  || (dragDom, null) 
 
     = (e) =&gt; { 
      // Press the mouse to calculate the distance from the current element to the viewing area      const disX =  -  
      const disY =  -  
 
      // The obtained value is replaced with px regular matching      let styL, styT 
 
      // Note that the value obtained in ie is the first time that the component comes with 50% and assign it to px after moving      if (('%')) { 
        styL = + * (+(/%/g, '') / 100) 
        styT = + * (+(/%/g, '') / 100) 
      } else { 
        styL = +(/px/g, '') 
        styT = +(/px/g, '') 
      } 
 
       = function(e) { 
        // Calculate the distance of movement through event delegation        const l =  - disX 
        const t =  - disY 
 
        // Move the current element         = `${l + styL}px` 
         = `${t + styT}px` 
 
        // Transfer the location at this time        // ({x:,y:}) 
      } 
 
       = function(e) { 
         = null 
         = null 
      } 
    } 
  } 
})

Quote:

import ‘@/assets/'

References in modules

< el-dialog v-dialogDrag></ el-dialog>

There are a few points to pay attention to the browser

Each pop-up window must have a unique dom to operate, and the command can be used.
When dragging, add draggable block header
Because the width of the element-ui dialog component is used by percentage when designing, different browsers here have compatibility issues
Implement drag-and-drop width and height problems to obtain edge problems div positioning Set simulated edges

Summarize

This is the article about el-dialog implementing drag and drop function in element UI. For more related content on el-dialog implementing drag and drop function, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!