Results the preview

Function introduction

Based on Vue. Js (2.0) version of the development, through the drag and drop visual operation, generate H5 pages, similar to easy qixiu tools. The front-end display page uses the previously released vue-animate- Fullpage plugin for animation rendering.Copy the code

Vue -animate-fullpage plugin

Vue – the animate – fullpage juejin plugin. Cn/post / 694574…

What are the functions?

At present, it can only set the background picture, insert picture, text (text size, color), etc. After the second phase, more functions will be gradually added.Copy the code

What are the animation effects?

Currently, the open source animate. CSS animation library is used.Copy the code

Drag and drop core functionality implementation?

Drag and drop can be achieved by adding elements of a custom directive (V-Drag).Copy the code

Tips: There are several attributes you need to know before creating a custom directive.

PageX, pageY: : The position of the mouse pointer, the coordinates of the document. OffsetLeft: The distance between an element and the left or upper control. OffsetTop: The distance between the element and the top of the upper control.Copy the code

Directly on the code:

Js code:

// Define a global directive v-drag in main.js

Vue.directive('drag', {
  //1. The bind function is executed immediately after the instruction is bound to the element, only once
  //2. The first argument in each function is always el, which represents the element of the binding instruction. The el argument is a native JS object
  //3. Focus cannot be obtained from el.focus() because it only works after DOM insertion
  bind: function (el, binding) {
    let oDiv = el; // Get the current element
    let firstTime = ' ', lastTime = ' ';
    oDiv.style.position = "absolute"; // To implement drag and drop, you need to add absolute positioning to the element (if the element has already been added to the CSS, this can be omitted)
    el.onmousedown = function (e) {// Subtract the left and top values of the parent element of the current element from the X and Y coordinates of the current element from the window
      var disX = e.pageX - el.offsetLeft;
      var disY = e.pageY - el.offsetTop;
      oDiv.setAttribute('ele-flag'.false)// Add attributes to the current element to determine the element state
      oDiv.setAttribute('draging-flag'.true)
      firstTime = new Date().getTime();
      document.onmousemove = function (e) {
        el.style.left = e.pageX - disX + 'px';// Get the drag position of the current element
        el.style.top = e.pageY - disY + 'px';
        binding.value({ left: e.pageX - disX, top: e.pageY - disY }) // Pass the latest coordinates back to the component for easy access
        return false;
      }
      document.onmouseup = function (event) {
        document.onmousemove = document.onmouseup = null;  Clear the onMousemove event
        lastTime = new Date().getTime(); 
        if ((lastTime - firstTime) > 200) {
          oDiv.setAttribute('ele-flag'.true)
          event.stopPropagation(); // Prevent bubbling
        }
        setTimeout(function () {
          oDiv.setAttribute('draging-flag'.false)},100)}}}})Copy the code

Component code

/ / HTML code

 <div id="app">

　　<div class="drag-box" v-drag="greet"></div> <! V-drag is a custom instruction that uses greet to drag and drop the greet command. 

</div>
Copy the code
Call greet in vue's methods lifecycle.methods: {greet(val){console.log(val)；
      }
   }
Copy the code

Attach GitHub address: github.com/ALazyTiger/…