How to use Vue and Element-UI to implement drag-and-drop sorting function

How to use Vue and Element-UI to implement drag-and-drop sorting function

Foreword:
In web development, drag-and-drop sorting function is a common and practical function. This article will introduce how to use Vue and Element-UI to implement the drag-and-drop sorting function, and demonstrate the implementation process through code examples.

1. Environment setup

1. Installing Node.js
   Before starting, you need to install Node.js. You can visit https://nodejs.org/ to download and install the version corresponding to the operating system.
2. Install Vue CLI
   Vue CLI is a tool used to quickly build Vue projects. Open the command line tool and execute the following command to install Vue CLI:

npm install -g @vue/cli

3. Create a Vue project
   Execute the following in the command line Command to create a new Vue project:

vue create drag-sort-demo

Follow the prompts to select configuration options and wait for the project to be created.

4. Install Element-UI
   Enter the Vue project directory you just created, and execute the following command on the command line to install Element-UI:

npm install element-ui

2. Implement drag-and-drop sorting function

1. Import Element-UI
   Import the styles and components of Element-UI in the entry file src/main.js of the Vue project:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. Create demo component
   Create a new component DragSortDemo.vue in the src/components directory to demonstrate the drag-and-drop sorting function. Edit the DragSortDemo.vue file and add the following code:

<script><br>export default {<br> data() {</script>

return {
  list: [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
    { id: 3, name: 'C' },
    { id: 4, name: 'D' },
    { id: 5, name: 'E' },
  ],
  draggingId: null,
};

},
methods: {

handleDragStart(item) {
  this.draggingId = item.id;
},
handleDragEnd() {
  this.draggingId = null;
},
handleSort() {
  const sortedList = Array.from(this.$el.querySelectorAll('.drag-item')).map((el, index) => {
    const id = el.getAttribute('data-id');
    const name = el.textContent;
    return { id, name, sort: index + 1 };
  });
  // 将排序后的列表保存到数据库或发送给后端
},

},
};

.drag-item {
padding: 10px;
margin: 10px 0;
background-color: #f5f5f5;
border: 1px solid #ebebeb;
cursor: move;
transition: box-shadow 0.3s;
}

.drag-item.dragging {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

Explanation:

• In the template, use the v-for directive to dynamically render list items. The class of the list item is bound to a calculated property, which is used to determine whether the currently dragged item is the list item.
• Add the draggable attribute to each list item, and register the dragstart and dragend event handlers to trigger the drag start and end events respectively.
• The handleSort method saves or sends the drag-and-drop sorted list data to the backend for processing.

3. Using components
   Use the DragSortDemo component in the src/App.vue file:

<script><br>import DragSortDemo from './components/DragSortDemo.vue' ;</script>

export default {
components: {

DragSortDemo,

},
};

3. Run the project
Execute the following command in the command line to start the project:

npm run serve

Visit http://localhost:8080 to see the demonstration page of the drag and drop sorting function. Drag the list items to change the sorting, and click the Save Sorting button to save the sorting results.

Conclusion:
Through the above steps, we successfully implemented the drag-and-drop sorting function using Vue and Element-UI. This provides a simple and practical solution for our web development, which can improve user experience and optimize interface interaction. I hope this article can be helpful to everyone's front-end development work.

The above is the detailed content of How to use Vue and Element-UI to implement drag-and-drop sorting function. For more information, please follow other related articles on the PHP Chinese website!