为什么拖动过程中border-radius的圆角会消失

Question

为什么拖动过程中border-radius的圆角消失了(其实好像也没消失)，而且好像截取了背景部分来填充圆角？

包含图片子项class

.list_item_pic {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 3vh;
  background-size: cover;
  transition: all ease 0.3s;
}

父容器css class:

.playlist_display_area {
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  width: calc(100%);
  height: 60vh;
  padding: 0 10px;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, 28vh);
  grid-template-rows: repeat(2, 28vh);
  /* grid-template-columns: repeat(auto-fill, minmax(28vh, auto));
  grid-template-rows: repeat(auto-fill, minmax(28vh, auto)); */
  grid-auto-flow: column;
  display: grid;
}

React jsx code:

 <div className="playlist_display_area">
        {playLists?.map((playlist) => {
          const songs = playlist.songs;
          let listBg = songs[songs.length - 1]?.AlbmPic;
          listBg = listBg || this.trackBoxBgArr[getRandomInt(0, 5)];
          return (
            <div
              key={playlist.listId}
              className={`list_item_pic ${playlist.boxSize}`}
              onContextMenu={(e) =>
                this.onContextMenu(e, playlist, playLists)
              }
              draggable="true"
              onDragStart={() => this.handleDragStart(playlist.listId)}
              onDrop={(e) => this.ondrop(e, playlist.listId)}
              onDragOver={(e) => this.handleDragover(e)}
              style={{ backgroundImage: listBg }}
            >
              <div className="list_inside_label">{playlist.name}</div>
            </div>
          );
        })}
      </div>

Answer 1

楼上怎么没放自己的文章呢？如何自定义 drag 样式。还好我前几天看过 🐶

function dragstart_handler(ev) {
 var img = new Image();
 img.src = 'example.jpg';
 img.width = 50;//无效
 img.height = 50;
 ev.dataTransfer.setDragImage(img, 0, 0);
}

文章内部用 setDragImage 来显示的效果。

使用文章内部的办法，可以自定义样式。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

这个预览图是浏览器自动生成的，没法去修改，但是可以隐藏起来，然后复制一份一样的 dom 元素，根据拖拽改变位置就行了。

可以引用这个库：https://github.com/XboxYan/dr...，只需要引入就行，什么都不用改，相信可以解决你的问题

Answer 3

通过给可被拖拽元素添加

.sortable {
  transform: translate(0, 0);
}

可以还原样式

参考：

1. Question: How to make square corners transparent when dragging rounded-corner element? · Issue #788 · react-dnd/react-dnd (github.com)
2. Setting a custom ghost image when using HTML5 drag and drop (kryogenix.org)