H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue项目中在使用draggable进行拖拽时,超出滚动条外的,那么拖拽的元素将会不完整显示

屏幕快照 2019-11-13 11.10.38.png
上图为完整时的拖拽

屏幕快照 2019-11-13 11.10.15.png
上图为拖拽最后一项时的显示效果

现在想到的是利用html2canvas在Dragstart时重新生成一个图片
再利用 dataTransfer.setDragImage() 设置被拖拽的影子元素
但是在使用该方法时 可以拿到base64的图片地址 却无法显示图片

请问还有更好的解决办法吗

回答:

既然图片不行,那就试着用节点加到dataTransfer.setDragImage()中去
最后成功了,下面附上代码。

      // 在dragstart 中根据需要自行配置属性
      let el = event.target;
      this.ghost = el.cloneNode(true);
      this.ghost.className = el.className;
      this.ghost.style.width = '228px';
      this.ghost.style.height = '116px';
      document.body.appendChild(this.ghost);
      document.body.lastChild.style.position = 'absolute';
      document.body.lastChild.style.left = '-100%';
      event.dataTransfer.setDragImage(this.ghost, 100, 60);

另外可以在你的dragend中删除这个给body添加的节点

document.body.removeChild(document.body.lastChild);

如果还有其他好方法,请分享一下~

最后附上效果
图片描述

本文地址:H5W3 » vue项目中在使用draggable进行拖拽时,超出滚动条外的,那么拖拽的元素将会不完整显示

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址