How to use Vue and Element-UI to implement data dragging and sorting functions

How to use Vue and Element-UI to implement data dragging and sorting functions

Introduction:
With the development of web applications, data dragging and sorting functions have become necessary for many applications part. As a modern JavaScript framework, Vue.js provides convenient data binding and component-based development methods, while Element-UI, as a UI framework based on Vue.js, provides a series of excellent components and interactive effects. This article will introduce how to use Vue and Element-UI to implement data dragging and sorting functions, and give sample code.

1. Preparation work
   Before we start, we need to prepare the relevant development environment. First, make sure you have Node.js and npm installed. Then, install Vue and Element-UI via npm.

   npm install vue
   npm install element-ui

   After the installation is complete, create a new Vue project and introduce the Element-UI library.

   vue create drag-sort-demo
   cd drag-sort-demo
   npm install element-ui

   Next, introduce Vue and Element-UI into Vue’s entry file main.js, and use the Vue.use() method to register Element-UI components.

   import Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   
   Vue.use(ElementUI)
   
   new Vue({
     render: h => h(App)
   }).$mount('#app')

   So far, we have completed the preparation work, and next we will start to implement the data drag and sort function.

2. Implementing data list
   First, we need to create a data list to display data items that can be dragged, dropped, and sorted. In Vue components, you can use the v-for directive to traverse the data list, and use the el-card component to display each data item.

   <template>
     <div>
    <el-card v-for="item in list" :key="item.id">
      {{ item.name }}
    </el-card>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      list: [
        { id: 1, name: '数据项1' },
        { id: 2, name: '数据项2' },
        { id: 3, name: '数据项3' },
        { id: 4, name: '数据项4' },
        { id: 5, name: '数据项5' }
      ]
    }
     }
   }
   </script>

   Now, we have completed the display of the data list.

3. Add drag and drop function
   Next, we will add drag and drop function for each data item. In Element-UI, you can use the el-draggable directive to implement the drag-and-drop function. We can add the el-draggable directive to the el-card component and bind a property related to the data item.

   <template>
     <div>
    <el-card v-for="item in list" :key="item.id" v-el-draggable="item">
      {{ item.name }}
    </el-card>
     </div>
   </template>
   
   <script>
   export default {
     // ...
     directives: {
    'el-draggable': {
      bind(el, binding, vnode) {
        el.draggable = true
        el.addEventListener('dragstart', (event) => {
          event.dataTransfer.setData('text/plain', JSON.stringify(binding.value))
        })
      }
    }
     }
   }
   </script>

   In the el-draggable directive, we set the draggable attribute of the element to true to enable dragging functionality. Then, in the dragstart event, we store the value of the current data item as a JSON string into the DataTransfer object.

4. Add sorting function
   In addition to the drag and drop function, we also need to implement the sorting function after dragging the data items to the specified position. In Element-UI, you can use the el-dropzone directive to implement the sorting function. We can add the el-dropzone directive to the container where the el-card component is located and bind a property related to the data list.

   <template>
     <div v-el-dropzone="list">
    <el-card v-for="item in list" :key="item.id" v-el-draggable="item">
      {{ item.name }}
    </el-card>
     </div>
   </template>
   
   <script>
   export default {
     // ...
     directives: {
    'el-draggable': {
      // ...
      bind(el, binding, vnode) {
        // ...
        el.addEventListener('dragend', () => {
          vnode.context.$forceUpdate();
        })
      }
    },
    'el-dropzone': {
      bind(el, binding, vnode) {
        el.addEventListener('dragover', (event) => {
          event.preventDefault()
        })
        el.addEventListener('drop', (event) => {
          event.preventDefault()
          const draggedItem = JSON.parse(event.dataTransfer.getData('text/plain'))
          const newList = binding.value.slice()
          const index = newList.findIndex(item => item.id === draggedItem.id)
          newList.splice(index, 1)
          newList.splice(el.dataset.index, 0, draggedItem)
          vnode.context[binding.expression] = newList
        })
      }
    }
     }
   }
   </script>

   In the el-dropzone directive, we call the preventDefault method in the dragover event to prevent the browser's default drag-and-drop behavior. Then, in the drop event, we get the dragged data item and find its position in the original data list based on its id. We then create a new copy of the data list, remove the dragged data item from it, and insert the data item at the specified location. Finally, we update the data list by modifying the corresponding data attributes in the Vue instance.

5. Effect display

After implementing the above steps, we have completed the development of data drag and sort functions. Now we can run the project and see the effect.

npm run serve

Open the browser and visit http://localhost:8080 to see the data list with drag-and-drop and sorting functions.

Conclusion:
This article details how to use Vue and Element-UI to implement data dragging and sorting functions. By using the el-draggable and el-dropzone directives, we can easily add dragging and sorting functionality to the data list. I hope this article will be helpful to developers who are developing web applications so that they can implement this common function more efficiently.

Reference link:

• Vue official documentation: https://cn.vuejs.org/
• Element-UI official documentation: https://element. eleme.io/

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