How to use Vue to achieve collapsible and drag-and-drop sorting effects?

In front-end development, it is a common requirement to achieve foldable and drag-and-drop sorting effects. This function can be easily and quickly implemented using the Vue framework. This article will introduce how to use Vue to achieve foldable and drag-and-drop sorting effects, making the page look more beautiful and easier to use.

1. Foldable effect

1.1 Write HTML and CSS code

First, create the elements that need to be folded in HTML, as shown below:

<div class="collapse">
  <div class="header">折叠标题</div>
  <div class="content">折叠内容</div>
</div>

Then, use CSS to style these elements.

.collapse {
  border: 1px solid #ccc;
}

.header {
  background-color: #eee;
  cursor: pointer;
  padding: 10px;
}

.content {
  padding: 10px;
}

Here, we add a border to the collapse box, set the background color and cursor style. At the same time, we added a click event to the title to switch the display/hidden state of the content when the title is clicked.

1.2 Add Vue component

Next, we need to create a Vue component for the collapsible effect. First, we need to import Vue:

import Vue from 'vue';

Then, we can create a component using the Vue.component() method:

Vue.component('collapse', {
  props: {
    header: String,
    content: String,
  },
  data() {
    return {
      show: false, // 初始状态为隐藏
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
  template: `
    <div class="collapse">
      <div class="header" @click="toggle">{{ header }}</div>
      <div class="content" v-show="show">{{ content }}</div>
    </div>
  `,
});

Here, we create a component called 'collapse' . It can accept two attributes: header and content. We used the data() method to create a show variable whose initial value is false, indicating that the content of the folding box is hidden. We then use the toggle() method to toggle the value of the show variable when the title is clicked. Finally, we use the template attribute to define the HTML structure of the component.

1.3 Using components in HTML

Finally, we only need to use this component in HTML:

<collapse header="折叠标题" content="折叠内容"></collapse>

Here we pass two attributes to the component: header and content . This will be displayed in the component as the title and content of the collapse box respectively. After clicking on the title, the content will expand or collapse.

2. Drag and drop sorting effect

2.1 Writing HTML and CSS code

Let’s first take a look at how to achieve the drag and drop effect. First, we create the elements that need to be sorted in the HTML, as shown below:

<div id="app">
  <div class="sortable">
    <div v-for="(item, index) in items" :key="item.id" class="item" :data-index="index">{{ item.name }}</div>
  </div>
</div>

Then, we style these elements using CSS styles.

.sortable {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
}

.item {
  background: #eaeaea;
  border: 1px solid #ccc;
  cursor: grab;
  margin: 10px;
  padding: 10px;
  text-align: center;
  width: 100px;
}

Here, we use flex layout so that elements can wrap automatically. Each element has a gray background and border. When the mouse is hovering over it, the cursor style will change to "grab", indicating that it can be dragged.

2.2 Add Vue component

In order to achieve the drag and drop sorting effect, we also need to add a Vue component. Similarly, we want to import Vue:

import Vue from 'vue';

Then, we create a component using the Vue.component() method:

Vue.component('sortable', {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' },
      ],
    };
  },
  mounted() {
    const sortable = new Sortable(this.$el, {
      animation: 150,
      onEnd: event => {
        const item = this.items.splice(event.oldIndex, 1)[0];
        this.items.splice(event.newIndex, 0, item);
      },
    });
  },
  template: `
    <div class="sortable">
      <div v-for="(item, index) in items" :key="item.id" class="item" :data-index="index">{{ item.name }}</div>
    </div>
  `,
});

Here, we create a component called "sortable". We use the data() method to create an items array, which contains the elements that need to be sorted. We then use the mounted() method to initialize the Sortable library after the component is loaded and apply it to the root element of the component. We use the template attribute to define the HTML structure of the component.

At the end of dragging, we use the onEnd() method to update the items array. We use the splice() method to remove an element from the items array and return it, and use the splice() method to insert the element into a new position.

2.3 Using components in HTML

Finally, we use this component in HTML:

<sortable></sortable>

This will show us the draggable elements and their ordering Effect.

Summary

In this article, we introduced how to use Vue to achieve collapsible and drag-and-drop sorting effects. These technologies can help us make the design of the page more beautiful and easier to use. These techniques are extremely useful for both personal and commercial projects. We hope this article helps you better understand how to use Vue to achieve these interactive effects and apply them in future projects to make your pages look more attractive and easy to use.

The above is the detailed content of How to use Vue to achieve collapsible and drag-and-drop sorting effects?. For more information, please follow other related articles on the PHP Chinese website!