基于draggable.js拖拽表格

最新推荐文章于 2024-04-28 10:55:39 发布
最新推荐文章于 2024-04-28 10:55:39 发布
阅读量537 收藏 9
点赞数 9
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77079844/article/details/134727789
版权 
<template>
  <div class="table-container">

    <table>
      <thead>
        <tr>
          <!-- 表头 -->
          <th v-for="(header, index) in headers" :key="index" :draggable="header.sortable" @dragstart="startDrag(index)"
            @dragover="dragOver" @drop="drop(index)" :style="{ width: header.width }" style="padding: 0 5px;">
            <template v-if="header.desc">
              <div class="header-box" :style="{ justifyContent: header.textAlign }" style="display: flex;">
                <span @click="onclick">{{ header.text }}</span>
                <span class="svgcont" v-if="header.upSVGVisible & header.downSVGVisible">
                  <svg width="6" height="6" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" @click="up(index)"
                    v-if="header.upSVGVisible">
                    <polygon points="50,10 90,90 10,90" fill="grey" />
                  </svg>
                  <svg width="6" height="6" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" @click="down(index)"
                    v-if="header.downSVGVisible">
                    <polygon points="50,90 90,10 10,10" fill="grey" />
                  </svg>
                </span>
                <!-- 上箭头 -->
                <span class="svgcont" v-if="header.upSVGVisible & !header.downSVGVisible">
                  <svg width="8" height="8" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" @click="up(index)">
                    <polygon points="50,10 90,90 10,90" fill="white" />
                  </svg>
                </span>

                <!-- 下箭头点击 -->
                <span class="svgcont" v-if="header.downSVGVisible & !header.upSVGVisible">
                  <svg width="8" height="8" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" @click="down(index)">
                    <polygon points="50,90 90,10 10,10" fill="white" />
                  </svg>
                </span>
              </div>
            </template>
            <template v-else>
              <div class="header-box" :style="{ justifyContent: header.textAlign }" style="display: flex;">
                <span>{{ header.text }}</span>
              </div>
            </template>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in tableData" :key="rowIndex" :class="{ odd: rowIndex % 2 === 0 }">
          <td v-for="(cell, cellIndex) in row" :key="cellIndex" :style="{
            textAlign: cellTextAlign(cellIndex),
            borderRight: '1px solid #13161A',
            padding: '0 5px',
            cursor: 'default',
            color: cellColor(cellIndex)
          }" :title="`${cell}`">
            {{ cell }}
          </td>
        </tr>

      </tbody>
    </table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表头数据
      headers: [
        {
          text: '日期/时间', dataIndex: 0, sortable: true, width: '139px', desc: true, textAlign: 'flex-start', upSVGVisible: true, // 控制上箭头 SVG 的显示与隐藏
          downSVGVisible: true,
        },
        {
          text: '类型', dataIndex: 1, sortable: true, width: '202px', desc: true, textAlign: 'flex-start', upSVGVisible: true, downSVGVisible: true, // 控制上箭头 SVG 的显示与隐藏
        },
        {
          text: '订单号', dataIndex: 2, sortable: true, width: '99px', desc: true, textAlign: 'flex-start', upSVGVisible: true, downSVGVisible: true, // 控制上箭头 SVG 的显示与隐藏
        },
        {
          text: '交易号', dataIndex: 3, sortable: true, width: '99px', desc: true, textAlign: 'flex-start', upSVGVisible: true, downSVGVisible: true, // 控制上箭头 SVG 的显示与隐藏
        },
        {
          text: '相关订单号', dataIndex: 4, sortable: true, width: '118px', desc: true, textAlign: 'flex-start', upSVGVisible: true, downSVGVisible: true, // 控制上箭头 SVG 的显示与隐藏
        },
        {
          text: '产品', dataIndex: 5, sortable: true, width: '326px', desc: true, textAlign: 'flex-star', upSVGVisible: true, downSVGVisible: true, // 控制上箭头 SVG 的显示与隐藏
        },
        { text: '数量/金额', dataIndex: 6, sortable: true, width: '99px', textAlign: 'flex-end' },
        {
          text: '价格', dataIndex: 7, sortable: true, width: '99px', desc: true, textAlign: 'flex-end', upSVGVisible: true, downSVGVisible: true, // 控制上箭头 SVG 的显示与隐藏
        },
        {
          text: '止损', dataIndex: 8, sortable: true, width: '99px', textAlign: 'flex-end', upSVGVisible: true, downSVGVisible: true, // 控制上箭头 SVG 的显示与隐藏
        },
        {
          text: '获利', dataIndex: 9, sortable: true, width: '99px', textAlign: 'flex-end', upSVGVisible: true, downSVGVisible: true,// 控制上箭头 SVG 的显示与隐藏
        },
        {
          text: '兑换率', dataIndex: 10, sortable: true, width: '139px', textAlign: 'flex-end', upSVGVisible: true, downSVGVisible: true, // 控制上箭头 SVG 的显示与隐藏
        },
        {
          text: '价值', dataIndex: 11, sortable: true, width: '99px', desc: true, textAlign: 'flex-end', upSVGVisible: true, downSVGVisible: true, // 控制上箭头 SVG 的显示与隐藏
        },
        {
          text: '金额', dataIndex: 12, sortable: true, width: '99px', desc: true, textAlign: 'flex-end', upSVGVisible: true, downSVGVisible: true,// 控制上箭头 SVG 的显示与隐藏
        },
        {
          text: '余额', dataIndex: 13, sortable: true, width: '101px', desc: true, textAlign: 'flex-end', upSVGVisible: true, downSVGVisible: true, // 控制上箭头 SVG 的显示与隐藏
        },
      ],
      // 表格数据
      tableData: [
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],
        ['内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2', '内容3', '内容1', '内容2'],


      ],
      // 正在拖动的列的索引
      draggingColumnIndex: null,
      show: false,
    }
  },

  methods: {
    // 拖动开始事件处理函数
    startDrag(index) {
      this.draggingColumnIndex = index;
    },
    // 拖动到目标区域事件处理函数
    dragOver(event) {
      event.preventDefault();
    },
    // 放置拖动列的目标位置事件处理函数
    drop(index) {
      if (this.draggingColumnIndex !== null) {
        // 交换表头位置
        const movedHeader = this.headers.splice(this.draggingColumnIndex, 1)[0];
        this.headers.splice(index, 0, movedHeader);

        // 交换对应内容位置
        this.tableData.forEach(row => {
          const movedCell = row.splice(this.draggingColumnIndex, 1)[0];
          row.splice(index, 0, movedCell);
        });
        this.draggingColumnIndex = null;
      }
    },
    onclick() {
      console.log(1);
      //这里做排序事件
    },
    cellTextAlign(cellIndex) {

      return this.headers[cellIndex].dataIndex >= 6 ? 'right' : 'left';
    },
    cellColor(cellIndex) {
      const dataIndex = this.headers[cellIndex].dataIndex;
      if (dataIndex === 8) {
        return '#FF443D';
      } else if (dataIndex === 9) {
        return '#07E11C';
      } else {
        return '#fff';
      }
    },

    up(index) {
      // 上箭头点击事件处理函数
      // 这里根据 index 控制要显示的 SVG
      this.headers.forEach((header, i) => {
        if (i !== index) {
          header.upSVGVisible = true;
          header.downSVGVisible = true;
        }
      });
      this.headers[index].upSVGVisible = false;
      this.headers[index].downSVGVisible = true;
    },
    down(index) {
      // 下箭头点击事件处理函数
      // 这里根据 index 控制要显示的 SVG
      this.headers.forEach((header, i) => {
        if (i !== index) {
          header.upSVGVisible = true;
          header.downSVGVisible = true;
        }
      });
      this.headers[index].upSVGVisible = true;
      this.headers[index].downSVGVisible = false;

    },

  },
};
</script>

<style scoped>
/* 根据需要自定义样式 */
th {
  height: 23px;
  position: sticky;
  top: 0;
}

th,
td {


  font-size: 10px;
  color: #FFFFFF;
  text-align: left;
}

th {
  height: 23px;
  background: #13161A;
  border-right: 1px solid #292D31;
}

tr.odd {

  background: #111A24;
  /* 奇数行设置黄色背景色 */
}

.table-container {
  max-height: 100vh;
  /* 设置最大高度 */
  overflow-y: auto;
  /* 垂直滚动条 */

}

.table-container {
  /* 自定义滚动条样式 */
  scrollbar-width: thin;
  /* 设置滚动条宽度 */
  scrollbar-color: #282E35 #3D4651;
  /* 设置滚动条颜色，第一个参数是滚动条轨道颜色，第二个参数是滚动条滑块颜色 */
}

/* Webkit 内核浏览器的滚动条样式 */
/* ::-webkit-scrollbar 是 Webkit 内核浏览器的伪类 */
/* 使用 ::-webkit-scrollbar 进行样式设置 */
.table-container::-webkit-scrollbar {
  width: 4px;
  /* 设置滚动条宽度 */
}

/* 设置滚动条轨道的样式 */
.table-container::-webkit-scrollbar-track {
  background-color: #282E35;
  /* 设置滚动条轨道颜色 */
  width: 12px;
}

.table-container::-webkit-scrollbar {
  width: 16px !important
}

/* 设置滚动条滑块的样式 */
.table-container::-webkit-scrollbar-thumb {
  background-color: #3D4651;
  /* 设置滚动条滑块颜色 */
  border-radius: 4px;
  /* 设置滚动条滑块的圆角 */
}

.svgcont {
  display: flex;
  flex-direction: column;
  margin-left: 3px;
  justify-content: center;
}
</style>

混入公司的小袁同学
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
从基础开始-draggable.js
zeyu1021的专栏
02-06 2692
下面是自己写的draggable.js(仅供参考) draggable.js: (function(){ jQuery.fn.extend({ draggable: function(){ var $this = $(this); $this.css({position: "relative"}); $(this).on("mouse
draggable.js源码分析
03-22
NULL 博文链接：https://kalllx.iteye.com/blog/830917
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
2022/09/02更新： 下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。 没有上网条件的可以在这里下载已经更新。 说明：本人前端小白不是什么骗子（我有4.5k多分没啥毛用），之前没有现成的组件就用Vuedraggable来实现，功能实现了但是不太友好。 =======以下是之前的说明===== 原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
jquery.ui.draggable.js
11-26
JQuery的插件，实现拖拽效果所需要的插件，jquery.ui.draggable.js
原生JS的拖拽属性draggable
qq_39237831的博客
03-06 1038
draggable 属性规定元素是否可拖动。链接和图像默认是可拖动的。draggable 属性经常用于拖放操作。draggable 属性是 HTML5 新增的。如果要实现拖放，需要具备以下条件（1）拖动的元素要赋予draggable属性，属性值为true。（2）最重要的三个事件：dragstart、dragover、drop被托动元素A需要设置draggable属性、dragstart事件拖入元素B需要设置dragover、drop事件.one {
draggable让页面元素能移动拖拽
03-01
draggable很好用的一款jquery插件能让你页面元素排序拖拽
VueDraggableVuejs组件基于Sortablejs进行同步的拖放排序
08-08
Vue组件允许与View-Model同步进行拖放排序。 基于Sortable.js
jquery.dragtable.js
10-10
bootstrap-table拖拽需要dragtable.css，jquery.dragtable.js，jquery-ui.js，bootstrap-table-reorder-columns.js
js 图形操作一（兼容pc、移动端实现 draggable属性 拖放效果）
zcc的博客
08-02 2723
区别在获取属性不同： changedPointers changedTouches。draggable 属性是 HTML5 新增的。属性规定元素是否可拖动。draggable 属性经常用于拖放操作。当按下手指时，触发ontouchstart。项目示例图如下：PC 实现拖动、放下功能。当移动手指时，触发ontouchmove。当移走手指时，触发ontouchend。二、使用 hammer.js。...
原生JS的拖拽属性draggable（详解）
热门推荐
weixin_46726346的博客
12-02 1万+
作为h5新增的属性draggable，它能够给与一切的html元素拖动的效果。而在这个属性之下，也有着关于拖动效果的各个方法。而这一篇文章，主要就是说一下关于draggable属性的使用以及工作场景。
2020-12-06
qq_51592087的博客
12-10 72
操作列表 遍历整个列表 使用单复数形式名称，可帮助判断处理的是单个列表元素还是整个列表元素。
js 实现dragable功能
10-22
可以拖拽控件，放到指定div内，draggable and dropable
Draggable打造跨平台的轻量级原生JS拖拽组件库
08-12
自己写的一个拖拽库，基于原生JS实现，无任何依赖，同时还做了IE8的兼容，在IE8的情况下transform回退到position实现。拖拽的动画通过绑定在render函数上的requestAnimationFrame实现而不是使用mousemove回调。
vue.draggable实现表格拖拽排序效果
01-19
本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码，供大家参考，具体内容如下 主要使用vuedraggable和sortablejs两个组件。 1、安装组件 npm install vuedraggable npm install sortablejs 2...
react-table-hoc-draggable-columns:用于可拖动列的ReactTable HOC
04-28
React表可拖动的列 用于可拖动列的ReactTable HOC 高阶组件，使Draggable列可用于重新排序或交换头寸。 *注意：此版本支持React Table V6。 文献资料 安装 npm install --save react-table-hoc-draggable-columns ...
各种效果的jquery ui(接口)介绍
12-09
基本的鼠标互动：拖拽(drag and dropping)、排序(sorting)、选择(selecting...第一部分：鼠标交互1.1 Draggables:拖拽所需文件：ui.mouse.jsui.draggable.jsui.draggable.ext.js 用法：文件载入后，可以拖拽class = “b
antd-table-dragula:Ant Design Table + Dragula - 行拖放
05-31
桌+ 行拖放和状态更新 这个项目是用引导的。 在项目目录中，您可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 645
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
最新发布
励志做最业余的专业博主，控件产品可以私我~
04-28 735
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
js 表格拖拽
05-26
1. 给表格中的每个单元格添加 draggable 属性，以使其具有可拖拽性。 ```html <td draggable="true">单元格 1 <td draggable="true">单元格 2 <td draggable="true">单元格 3 <td draggable="true">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值