vue global custom directive - element drag and drop implementation code

Xiaobai, I use the whole family bucket of vue-cli. Adding v-drap to the tags will implement element drag and drop. I wrote the global command in

('drag', {
 inserted: function (el) {
  =function(ev){
   var disX=;
   var disY=;
   =function(ev){
    var l=-disX;
    var t=-disY;
    =l+'px';
    =t+'px';
   };
   =function(){
    =null;
    =null;

   };
  };
 }

})

The zoom-in and zoom-out function will definitely be added later, and the positioning and width information will be retained in the state in vuex

pS: Let's look at the vue custom command for dragging and dropping on the panel below. The specific content is as follows:

Preface

This obtained in the directive is not a vue object, it is a vue object. Generally speaking, it is best not to access data on vue to pursue decoupling, but you can access method or ref through the value passed in the directive.

vue directive

The official documentation has actually explained it quite clearly. Here are a few key points to choose from.

1 arguments

el: the current node object, used to operate dom

binding: The value after template parsing

vNode: Vue compiled virtual nodes, you can get vue objects on it

oldVnode: Use the node content of the last changed current directive

2. life cycle

bind: Called during initialization, but the node may not be rendered at this time

inserted: Called when the bound element is inserted into the parent node. Try to use it here for dom operations

update: This will be triggered when internally

Panel drag logic

Use relative, clientX and clientY on the ship event to change the top and left of the panel.

Involved attributes

offsetLeft: OffsetLeft: The left boundary offset of the reference element
offsetTop: OffsetTop: The upper boundary offset of the reference element
clientWidth: This property can return the client area width of the specified element
clientHeight: This property can return the height of the specified element's client area
clientX: The horizontal coordinates of the mouse pointer relative to the browser page (or client area) when the event is triggered
clientY: The vertical coordinate of the mouse pointer relative to the browser page (or client area) when the event is triggered
onmousedown: Mousedown event
onmousemove: Mouse swipe event
onmouseup: Mouse release event

Implement code

<div v-drag="'refName'"></div>

Used on bound components, value is not a must. If you don’t choose, it is a document-based mobile by default.

directives: {
 drag: {
  // Using bind may not be rendered  inserted: function(el, binding, vnode) {
  const _el = el; //Get the current element  const ref = .$refs[]; // Determine which box is based on movement  const masterNode = ref ? ref : document; // Used to bind events  const masterBody = ref ? ref : ; // Used to obtain height and width  const mgl = _el.offsetLeft;
  const mgt = _el.offsetTop;
  const maxWidth = ;
  const maxHeight = ;
  const elWidth = _el.clientWidth;
  const elHeight = _el.clientHeight;
  let positionX = 0,
   positionY = 0;
  _el.onmousedown = e =&gt; {
   // Calculate the position of the mouse relative to the element, and the added value is the value of margin   let disX =  - _el.offsetLeft + mgl; 
   let disY =  - _el.offsetTop + mgt;
    = e =&gt; {
   // Use the mouse position to subtract the position of the mouse relative to the element to obtain the position of the element   let left =  - disX;
   let top =  - disY;
   // The bound value cannot slide out of the box-based range   left &lt; 0 &amp;&amp; (left = 0);
   left &gt; (maxWidth - elWidth - mgl) &amp;&amp; (left = maxWidth - elWidth - mgl);
   top &lt; 0 &amp;&amp; (top = 0);
   top &gt; (maxHeight - elHeight - mgt) &amp;&amp; (top = maxHeight - elHeight - mgt);
   //Bind element position to positionX and positionY   positionX = top;
   positionY = left;
   
   //Move the current element   _el. = left + "px";
   _el. = top + "px";
   };
   // Here, the mouse is released after it exceeds the box-based range and will not be monitored    = e =&gt; {
    = null;
    = null;
   };
  };
  }
 }
 }

Summarize

The above is a detailed explanation of the vue custom command example for panel drag and drop introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message. The editor will reply to everyone in time!