Drag and drop sorting function of smooth transition based on Vue

Time:2019-12-11

Recently, we reread the official documents of Vue. In the section of sorting and transition of the list, the documents mentioned,<transition-group> The component has a special place, which can not only realize the entry and exit animation, but also change the positioning. The official website example is as follows:

 

The effect in the example looks very good. This effect reminds me of another use scenario. Before I implemented a list display requirement, PM wanted the list to have the function of dragging and sorting, which is convenient for him to operate (in fact, I didn’t make haha for him at the end). The dragged animation is very similar to this one. Search online, similar to plug-ins There should be a lot, so if we realize one ourselves, what’s the problem?

First, you need to drag elements to record the information about the beginning and end of dragging elements.

Move the element from the beginning of the drag to the end of the drag. During this period, how to smoothly transition the target element and the elements around the target element to the new position.

Problem 1 is very easy to solve. Turn to the API, HTML5 provides a drag and drop API with excellent performance. The PC side has good compatibility and can be used directly

Question 2 just uses what I learned above<transition-group>Component to implement.

Drag and drop API refers to a draggable element. In the whole process of user drag, you can get the information you want through this event:

 

In this case, we choose dragstart to record the information of the dragging element, and dragent to record the elements that are dragged. In the drag event, we do the operation of dragging the end, and the animation is handed over to thetransition-groupDo it.

The final effect is as follows:

 

The demo code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
  <title>test</title>
  <style type="text/css">
    .flip-list-move {
    transition: transform 1s;
   }
   .items {
    width: 300px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid red;
   }
  </style>
</head>
<body>
  <div>
   <transition-group name="flip-list">
     <div v-for="item in items" :key="item" draggable="true" @dragstart="dragstart(item)" @dragenter="dragenter(item)" @dragend="dragend(item)">{{item}}</div>
   </transition-group>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
  <script>
    var vue = new Vue({
     el: '#content',
     data: {
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      oldNum: 0,
      newNum: 0
     },
     created: function created () {
     }, 
     mounted: function mounted () {
     },
     methods: {
      shuffle: function() {
       this.items = _.shuffle(this.items);
      },
      //Record initial information
      dragstart: function(value) {
       this.oldNum = value;
      },
      //Do the final operation
      dragend: function(value) {
       if (this.oldNum != this.newNum) {
        let oldIndex = this.items.indexOf(this.oldNum);
        let newIndex = this.items.indexOf(this.newNum);
        let newItems = [...this.items];
        //Delete old node
        newItems.splice(oldIndex, 1); 
        //Add a new node to the target location in the list
        newItems.splice(newIndex, 0, this.oldNum);
        //As soon as this.items changes, the transition group works
        this.items = [...newItems];
       }
      },
      //Record information during movement
      dragenter: function(value) {
       this.newNum = value;
      }
     }
    }); 
  </script>
</body>
</html>

Note: you can also drag and drop again and again to change the order. You don’t need to wait for the drawing to do the animation again, but when you drag and do the animation at the same time, it looks dazzled (only in this demo, other plug-ins can provide other solutions, not in the table below for the moment). So I choose to do the animation after the user drag stops.

In this section, Vue official also introduces a simple animation queue called flip. If you are interested in it, you can study it. Flip introduction. Open this flip and you will find that another animation library gasp is introduced in its example, which can achieve cool animation effect. It is better to use it in combination with flip.

summary

The above is the drag and drop sorting function based on Vue that Xiaobian introduced to you. I hope it can help you. If you have any questions, please leave me a message, and Xiaobian will reply you in time!