Here is the suddenly diligent Zhuo, constantly updated in the documentation.

demand

“Z, I saw a new way of interaction. I saw it on competing products. Will we use this way in our products?” PO said before opening the competing product.

PO: “They can do it, we can do it okay?”

“Ah, yes yes….”

My heart twitched as I watched PO drag the form back and forth across the competing products in a silky display.

“Two days of work.”

The effect

Analysis of the

  1. The table simply uses the existing table component, which is used hereElTableAs a case
  2. Drag-and-drop functions:
    • usingdrag APIImplementation (lazy not to write demo (· ´ω ‘·))
    • Through a third-party library (SortableJS) (this library is quite useful, click to view the document)
  3. After the drag is complete, the request is sent to the back end
// All of the above code implementation
<script lang="ts" setup>
import { ElTable, ElTableColumn } from 'element-plus';
import Sortable from 'sortablejs';
import { onMounted, ref } from 'vue-demi';
import { tableData } from './data';

const data: Record<string.any>[] = tableData;

onMounted(() = > {
    const tbody = document.querySelector('.el-table tbody');

    Sortable.create(tbody, {
        onUpdate () {
            // Go here to initiate the request
            // Refresh the list}}); }); </script>Copy the code

That’s the whole implementation.

subsequent

Above we implemented a beggar version of drag and drop function, delivered to PO, PO also felt quite good, like, rose, commercial mutual blow….

When the visual designer walked by and saw this feature, he said, “Z, you can’t do this. It’s ugly. Add style “.

So, the final effect

By the way, in the renderer, you need to enable forceFallback: true for dragging to the top/bottom of the area. If false, you need to implement this behavior yourself.

The last

Source code: Github, if helpful, you can point a free star.

Screenshot software: ScreenToGif