Vue implements a visual drag page editor

Online address (using a VPN will be faster)

A visual page editor sounds out of reach, right? Let’s take a look at the animated picture first!

Before implementing this function, I referred to a lot of information on the Internet, but ultimately found nothing. All the various articles told about my past self!

So, at this time you need to figure it out yourself, how to achieve it?

Things to consider:

• Drag and drop implementation
• Definition of Data Structure
• Division of components
• Maintainability and scalability

Object reference: This is the coolest trick I have ever seen. Let me explain the details one by one! !

Drag and drop implementation

Drag events

The drag event of H5 is used here, mainly used for:

dragstart // Triggered when you start dragging an element draggable // Specify the draggable element dragend // Triggered when the drag operation ends dragover // Triggered when the dragged element moves over a droppable target drop // Triggered when the dragged element is released on a droppable target

Let's see how to use these events:

<!-- Drag element list data-->
<script>
// com is the corresponding view component, and typeList is displayed in the release area: {
 banner:
  name: 'Carousel',
  icon: 'el-icon-picture',
  com: Banner
 },
 product: {
  name: 'Product',
  icon: 'el-icon-s-goods',
  com: Product
 },
 images:
  name: 'Picture',
  icon: 'el-icon-picture',
  com: Images
 },
}
</script>
<!-- Drag element -->
<ul 
 @dragstart="dragStart"
 @dragend="dragEnd"
>
 <li 
  v-for="(val, key, index) in typeList"
  draggable 
  :data-type="key"
  :key="index + 1"
 >
  <span :class="val.icon"></span>
  <p>{{val.name}}</p>
 </li>
</ul>
<!-- Release area -->
<div 
 class="view-content"
 @drop="drog"
 @dragover="dragOver"
>
</div>

Drag to start

Define a variable type to determine the type of the current dragged element when the drag event starts, such as product, advertising image...

// Drag type dragStart(e) {
 this.type = e.target.dataset.type
}

After determining the type, enter the next step of the release area

Moving in the release zone

During the movement process, the position of the dragged element needs to be calculated in real time according to the mouse position. You can scroll down to preview the animated effect!

// 'view-content': the class of the outer box, push directly
// 'item': the element inside the box, the position needs to be calculated and the transformation operation needs to be performed dragOver() {
 let className = e.target.className
 let name = className !== 'view-content' ? 'item' : 'view-content'

 // Component's default data const defaultData = {
  type: this.type, // component type status: 2, // default status data: [], // basic data options: {} // other operations }

 if (name == 'view-content') {
  //...
 } else if (name == 'item') {
  //...
 }
}

Boundary processing, angle calculation

Core variables:

• isPush: Whether the dragged element has been pushed to the page data
• index: the final index value of the dragged element
• curIndex: The index value of the element where the mouse is located
• direction: the upper/lower part of the element where the mouse is located

When name=='view-content' , it means that the drag element is in the outer and blank releasable area. If it is not added, just push it directly.

if (name == 'view-content') {
 if (!this.isPush) {
  this.index = this.view.length
  this.isPush = true
  this.view.push(defaultData)
 }
}

When name=='item', that is, above an existing element, you need to calculate the position, up/down, add or move

if (name == 'item') {
 let target = e.target
 let [ y, h, curIndex ] = [ e.offsetY, target.offsetHeight, target.dataset.index ]
 let direction = y < (h / 2) // Calculate the position of the mouse on the current element to determine the up/down direction of the dragged element if (!this.isPush) {
  // first
  if (direction) {
   if (curIndex == 0) {
    this.view.unshift(defaultData)
   } else {
    this.view.splice(curIndex, 0, defaultData)
   }
  } else {
   curIndex = +curIndex + 1
   this.view.splice(curIndex, 0, defaultData)
  }
 } else {
  //Moving
  if (direction) {
   var i = curIndex == 0 ? 0 : curIndex - 1
   var result = this.view[i]['status'] == 2
  } else {
   var i = +curIndex + 1
   var result = this.view.length > i && this.view[i]['status'] == 2
  }
  
  // Whether the dragged element needs to change position if (result) return

  const temp = this.view.splice(this.index, 1)
  this.view.splice(curIndex, 0, temp[0])
 }
 this.index = curIndex // Drag element position this.isPush = true // Push if entering, that is true
}

• first: If not pushed, the position of the dragged element is determined based on the current index and direction
• Moving: Pushed and moving state. Find the state of the corresponding value according to the current index and direction. If it is a dragged element, return it, otherwise change the position.

To sum up: get the index of the element where the mouse is currently located, and then calculate whether the mouse is in the upper or lower half of the element, so as to infer the position of the dragged element! ! !

Small question:

In the above name=='item', the Event event needs to block the default event to avoid the target being an inner element, which makes it impossible to calculate the position. However, only using event blocking does not work here. I don’t know why. All child elements of .item need to be added with the attribute pointer-events: none!

e.preventDefault()
e.stopPropagation()

.item div{
 pointer-events: none;
}

Drag ends

When you release the mouse or leave the release area, the default state will be restored.

What is the role of status here?

1. The calculation rules above are used to determine whether an element is a drag element.
2. The page display mode: only the component name is displayed when dragging, and the normal display content is restored after releasing.

// End drag dragEnd(e) {
 this.$delete(this.view[this.index], 'status')
 this.isPush = false
 this.type = null
},
// Already placed at the specified position drog(e) {
 e.preventDefault()
 e.stopPropagation()
 this.dragEnd()
},

Content block drag and drop implementation

Due to time constraints, I am lazy here and use a more perfect list drag plugin Vue.Draggable (star 14.2k)

After studying it for a while, I found that its logic is related to the drag and drop implemented above, and the specific implementation methods are similar. I believe that with the above practical examples, you can also do it!

How about you try it yourself?

You can implement a drag component based on the usage of Vue.Draggable, which will use operations such as (drag, slot, DOM)

(I will come back and package one later if I have time)

Component Division

The view component in the middle and the editing component on the right are a set of components. As expected, they are a set of components. They are worthy of being a set of components!

page=>index manages the content of the entire page

.
├── components
| ├── Edit ## Edit on the right| | ├── Info # Basic information| | ├── Image # Advertising image| | ├── Product # Product| | └── Index # Manage and edit component information| └── View ## Middle view| | ├── Banner # Slideshow| | ├── Images # Advertising image| | └── Product # Product list└── page
 └── index ## Main page

To achieve the effect of previewing the page, just use the components under components=>View. The usage is the same as page=>index, so no excessive modifications are required!

Definition of Data Structure

To realize a bright and extensible function, it is essential to define a qualified data structure! At the same time it can also determine the quality of your code!

Of course, it still depends on what you have learned and your logical thinking!

The most eye-catching processing method here is to use the relationship between objects so that the value transfer between components only needs one-way transmission!

view: [
 {
  type: 'info',
  title: 'Page title',
  remarks: 'Page remarks',
  backgroundColor: 'red'
 },
 {
  type: 'banner',
  data: [
   { url: '1.jpg', name: 'Carousel Image 1', link: 'https://carousel image jump address.cn' },
   { url: '2.jpg', name: 'Carousel 2', link: 'https://carousel jump address.cn' }
  ]
 },
 {
  type: 'images',
  data: [
   { url: '1.jpg', name: 'Advertisement image 1', link: 'https://advertisement image jump address.cn' },
   { url: '2.jpg', name: 'Advertisement image 2', link: 'https://advertisement image jump address.cn' }
  ]
 },
 {
  type: 'product',
  data: [
   { id: '1', name: 'Product 1', image: '1.jpg' }, 
   { id: '2', name: 'Product 2', image: '2.jpg' }
  ],
  options:
   originalPrice: true, // strikethrough price goodRatio: true, // favorable rating volumeStr: false, // sales volume}
 }
]

It is an array, and the item in the array represents a module

• type: module type
• data: basic information
• options: other operations
  

....You can refer to the original component modules and expand them according to your needs.

Edit component value

When selecting the view component, pass the item object specified in the view as a parameter to the editing component!

The objects point to the same memory address and there is a reference relationship. You only need to modify them once to achieve multi-faceted data updates!

<section class="r">
 <EditForm
  :data="props"
  v-if="isRight"
 ></EditForm>
</section>
<script>
// Switch view component selectType(index) {
 this.isRight = false
 this.props = this.view[index]
 this.$nextTick(() => this.isRight = true)
}
</script>

Image upload

There happens to be an image upload component above, so let me share my usage tips here! !

Friends who use Element-ui's built-in upload component, please take a look (knock on the blackboard)

Let's first implement a simplified version:

<!-- Disable all default methods -->
<el-upload
 :http-request="upload"
 :show-file-list="false"
 multiple
 action
>
 <img :src="item.url" v-for="(item, index) in list" :key="index">
</el-upload>
<script>
upload(params) {
 const file = params.file;
 const form = new FormData();
 form.append("file", file);
 form.append("clientType", "multipart/form-data");

 const index = this.imageIndex // Edit the image index const data = { 
  url: URL.createObjectURL(file), 
  form
 }
 if (index !== null) {
  // this.list => picture collection this.$set(this.list, index, data)
 } else {
  this.list.push(data)
 }
}
</script>

• Rewrite the upload method
• Use URL.createObjectURL(file) to create a local preview address
• Save the form object and upload it when submitting

// According to the above code, use Promise to implement the upload function const request = []
this.list.forEach(item => {
 request.push(
  new Promise((resolve, reject) => {
   /**
    * Upload interface* Replace the original url
    * Delete form
    */
   imageUpload(item.form).then(res => {
    item.url = res.data.url
    delete item.form
    resolve(res)
   }).catch(err => {
    reject(err)
   })
  })
 )
})
Promise.all(request).then(res => {
 // ... submit ...
})

Wait until the last step to submit the data, then upload all the pictures, and call the interface for submitting data after the upload is complete! !

In the scenario where there is a form with multiple data submissions, this is the most correct approach!

Final summary

In fact, it is not complicated. The key lies in the planning of data structure, component interaction processing, logical methods, etc. As long as the core points of this step are achieved.

For other extensibility operations, such as adding new components, adding new operations, etc., the remaining problems are no longer a problem!

This can only be regarded as a simplified version. You can optimize, ponder and improve it according to your needs and absorb it into your own knowledge!

At least I have met my work needs, hahahahaha~~~

For more details, please check the source code. Here is the Github address. Thank you for your star. I am Li Bai who doesn't drink tea.

The above is the details of Vue's implementation of a visual drag-and-drop page editor. For more information about Vue's visual drag-and-drop page editor, please pay attention to other related articles on 123WORDPRESS.COM!