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:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<div class="drag-sort-demo">
  <el-collapse-transition>
    <div v-for="item in list" :key="item.id" class="drag-item" :class="{ 'dragging': draggingId === item.id }" draggable="true" @dragstart="handleDragStart(item)" @dragend="handleDragEnd(item)">
      {{ item.name }}
    </div>
  </el-collapse-transition>
</div>
<el-button type="primary" @click="handleSort">保存排序</el-button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
data() {

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 };
  });
  // 将排序后的列表保存到数据库或发送给后端
},

},
};
2cacc6d41bbb37262a98f745aa00fbf0

30e8033e360bcffb1ce9b4703e10b64c
.drag-sort-demo {
display: flex;
flex-wrap: wrap;
}

.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);
}
531ac245ce3e4fe3d50054a55f265927

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:

d477f9ce7bf77f53fbcf36bec1b69b7a
e0a127155eaad306e6803a1b3b80da90

<drag-sort-demo></drag-sort-demo>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import DragSortDemo from './components/DragSortDemo.vue' ;

export default {
components: {

DragSortDemo,

},
};
2cacc6d41bbb37262a98f745aa00fbf0

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!