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

Question

上图为完整时的拖拽

上图为拖拽最后一项时的显示效果

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

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

Answer 1

既然图片不行，那就试着用节点加到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);

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

最后附上效果