最新回复的贴子, 可以拖动连接的位置

其实很简单,就是使用outerHTML来实现的,看代码吧 在ie中表现不错,据说在firefox上不行,没办法了,没有firefox,等我转行做web再说吧 drag a link to here I
drag a link to here II
drag a link to here III
drag a link to here IV
<script> function swapobj(a,b) { var c = a.outerHTML; a.outerHTML = b.outerHTML; b.outerHTML = c; } function dropend() { var obj = event.srcElement;//拖动开始的元素 var src =document.elementFromPoint(event.clientX, event.clientY);//拖动结束点的元素 //只处理A,所以有下面的代码 while(src && src.tagName != "A") src = src.parentElement; //alert(src.outerHTML); if(src && src.tagName == "A" && src != obj) { swapobj(obj,src); } } </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueDraggable是一个基于Vue.js的Drag-and-Drop组件,可以实现拖拽和排序操作。ElementUI是一个基于Vue.js的UI组件库,提供了许多常用的UI组件,包括表格组件。 在使用ElementUI的表格组件时,我们可以使用VueDraggable来实现表头可以拖动交换位置的效果。具体实现过程如下: 1. 安装VueDraggable组件库 在项目中安装VueDraggable组件库,可以使用npm install vuedraggable --save 命令进行安装。 2. 在表格组件中使用VueDraggable 在表格组件中引入VueDraggable组件,并将表头数据作为props传入。在table-header的slot中,使用VueDraggable组件将表头数据进行渲染并设置为可拖动的。 ``` <template> <div> <el-table :data="tableData"> <el-table-column v-for="column in tableHeader" :key="column.prop" :prop="column.prop" :label="column.label" :sortable="true" :resizable="true" ></el-table-column> <template slot="header"> <draggable v-model="tableHeader" @end="onDragEnd" :options="{group:'tableHeader',handle:'.drag-handle'}" > <el-table-column v-for="(column, index) in tableHeader" :key="column.prop" :prop="column.prop" :label="column.label" :width="column.width" :resizable="true" :sortable="true" :class="['drag-handle',{'dragged':dragIndex === index}]"> <span slot-scope="{column}">{{column.label}}</span> </el-table-column> </draggable> </template> </el-table> </div> </template> <script> import draggable from 'vuedraggable' export default { data () { return { tableHeader: [ { prop: 'id', label: 'ID', width: 120 }, { prop: 'name', label: 'Name', width: 120 }, { prop: 'age', label: 'Age', width: 120 } ], tableData: [] } }, components: { draggable }, methods: { onDragEnd(evt) { this.dragIndex = -1; //重置被拖拽的元素的下标 } } } </script> ``` 以上就是实现表格表头可拖动交换位置的方法,通过将头部数据作为props传入VueDraggable组件,然后在表格头部的slot中使用VueDraggable组件进行渲染即可。同时,我们还可以设置拖动的group,以及拖动的handle等相关属性。在本例中,我们还设置了拖动结束后触发的事件,重置被拖拽元素的下标。 总的来说,VueDraggable与ElementUI的结合可以方便快捷地实现表头可拖动交换的功能,减轻开发者的工作量,提高系统的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值