let dragEle =document.querySelector('#drag-ele'); let dropTarget =document.querySelector('#drop-target'); dragEle.addEventListener('dragstart',event=>{	event.dataTransfer.setData('text/plain','i love you') }) dropTarget .addEventListener('dragover',event=>{//取消默认事件,激活drop event.preventDefault(); }) dropTarget .addEventListener('drop',event=>{let data = event.dataTransfer.getData('text/plain');console.log(data);// 'i love you' }) 复制代码
自定义拖拽效果
在拖拽过程中,浏览器默认了一些效果,可以通过设置dataTransfer的一些属性或方法达到美观效果。
指定一张图片,在拖拽中跟随鼠标
dragstart阶段配置:setDragImage(img:element,offsetX:number,offsetY:number)
let imgEle =document.querySelector('#img-ele') dragEle.addEventListener('dragstart',event=>{//计算图片的高度和宽度的一半,作为x、y轴的偏移,使图片居中var offsetX =parseFloat(getComputedStyle(imgEle ).width)/2;var offsetY =parseFloat(getComputedStyle(imgEle ).height)/2; event.dataTransfer.setDragImage(imgEle ,offsetX,offsetY); }) 复制代码
小图标提示
此处意义不是特别大,一般默认就行了。
允许释放的类型(仅作为提示效果,并不做真正的限制).
首先设置拖动元素的允许效果(effectAllo