前端拖拽功能-学习笔记

#前端拖拽

1. 设置拖拽元素的属性以及绑定拖拽开始的事件，如下：

其中：draggable="true"，设置该元素可拖拽；

@dragstart="dragStart($event, item.val)",设置元素开始拖拽时绑定的函数；

dragStart函数如下：

dragStart(event, type) {event.preventDefault && event.preventDefault();event.dataTransfer.setData('type', type);
},

event.dataTransfer.setData('type', type);用来传递拖拽时的传参，即在drop监听函数中可获取该参数信息；

2. 拖拽目标元素设置

其中@drop函数用来监听元素拖动到本位置处后的事件，具体函数如下：

drop(event) {// 获取数据类型console.log(event.currentTarget.id); // 获取拖拽目标元素的idconst type = event.dataTransfer.getData('type');// 获取拖拽源要素传递过来的参数数据
},

用户可根据源数据传递过来的参数进行进一步的业务操作

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！