可拖动蜂窝元件的“幽灵”

Question

我创建了一个带有可拖动蜂窝状div的网格（只有css，没有svg / img / canvas）。我希望它们既可拖动又可丢弃，所以如果我将它们放到另一个上，它们的内容就会交换掉。 Vue.js处理它。

问题是：当我开始拖动一个元素时，拖动的蜂窝的透明重影似乎跟随光标。这就是我想要的，但由于某种原因，透明的幽灵也有邻居蜂窝的一部分，好像透明幽灵是页面的拖动元素区域的矩形裁剪截图。

我可以通过将draggable element的不透明度设置为小于1来消除这些伪影。但它的内容也变得透明，图像和文本在蜂窝内。是否可以自定义可拖动元素的拖动透明重影？还是有一些解决方案？

/*@import "bourbon";*/

html {
  /*background-color: lightgray;*/
  box-sizing: border-box;
  font-family: arial;
}


/*$border: 15px;
$width: 100px;
$height: ($width*1.7320508075688772935274463);
$hex-margin: $width*.26;
$widthinner: 90px;
$heightinner: ($widthinner*1.7320508075688772935274463);*/

.hexy {
  position: relative;
  margin: 1px 26px;
  background-color: gray;
  height: 173px;
  width: 100px;
  /*outline: 1px solid red;*/
  display: inline-block;
  text-align: start;
}

.gold {
  background-color: gold
}

.blue {
  background-color: skyblue
}

.gray0 {
  background-color: DarkSeaGreen
}

.gray1 {
  background-color: gray
}

.gray2 {
  background-color: darkgray
}

.gray3 {
  background-color: lightgray
}

.hexy,
.hexy:before,
.hexy:after {
  height: 173px;
  width: 100px;
}

.hexy:before {
  position: absolute;
  content: "";
  background-color: inherit;
  transform: rotate(60deg);
  overflow: hidden;
}

.hexy:after {
  position: absolute;
  content: "";
  background-color: inherit;
  transform: rotate(-60deg);
  /*overflow: hidden;*/
}


/*.hexy:hover {
  background-color: #E48B34;
  cursor: pointer;
  z-index: 105;
}*/

.hexy:nth-child(odd) {
  top: 88px;
}

.hexy.gray0:nth-child(odd) {
  top: auto;
}

.hexynone {
  position: relative;
  display: inline-block;
  height: 173px;
  width: 100px;
  margin: 1px 26px;
}

.hexynone:nth-child(odd) {
  top: 88px;
}

[draggable] {
  user-select: none;
  -webkit-user-drag: element;
}

.hex-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  font-size: 1rem;
  text-align: center;
  z-index: 100;
  /* user-select: none; */
}

.hex-content>img {
  height: 100px;
  width: 100px;
  margin: 0 20px;
  display: block;
  /*text-align: center;*/
}

.hex-content>p {
  margin: 0;
  font-weight: bold;
}


/*.hex-img {
  background-color: green;
  background-position: 50% 50%;
  background-size: 100%;
  background-repeat: no-repeat;
  margin-bottom: 30px;
  height: 50px;
  width: 50px;
  }*/

.hex-container {
  width: 85%;
  height: auto;
  margin: 0 auto;
}

.ibws-fix {
  /* inline-block whitespace fix */
  font-size: 0;
  white-space: nowrap;
  text-align: center;
}

.hexyinner {
  position: absolute;
  /*margin: 1px $hex-margin;*/
  background-color: black;
  opacity: 0.5;
  height: 156px;
  width: 90px;
  top: 8px;
  left: 5px;
  /*outline: 1px solid red;*/
  display: inline-block;
}

.hexyinner,
.hexyinner:before,
.hexyinner:after {
  height: 156px;
  width: 90px;
  z-index: 20;
}

.hexyinner:before {
  position: absolute;
  content: "";
  background-color: inherit;
  transform: rotate(60deg);
  overflow: hidden;
}

.hexyinner:after {
  position: absolute;
  content: "";
  background-color: inherit;
  transform: rotate(-60deg);
  overflow: hidden;
}

<div class="hex-container">

  <div class="ibws-fix">

    <div class="hexy" draggable="true">
      <div class="hex-content">
        <img>
        <p>ASD</p>
        <p>321</p>
      </div>
    </div>

    <div class="hexy" draggable="true">
      <div class="hex-content">
        <img>
        <p>ASD</p>
        <p>321</p>
      </div>
    </div>

    <div class="hexy" draggable="true">
      <div class="hex-content">
        <img>
        <p>ASD</p>
        <p>321</p>
      </div>
    </div>

  </div>
  <div class="ibws-fix">

    <div class="hexy" draggable="true">
      <div class="hex-content">
        <img>
        <p>ASD</p>
        <p>321</p>
      </div>
    </div>

    <div class="hexy" draggable="true">
      <div class="hex-content">
        <img>
        <p>ASD</p>
        <p>321</p>
      </div>
    </div>

    <div class="hexy" draggable="true">
      <div class="hex-content">
        <img>
        <p>ASD</p>
        <p>321</p>
      </div>
    </div>

  </div>
  <div class="ibws-fix">

    <div class="hexynone"></div>

    <div class="hexy" draggable="true">
      <div class="hex-content">
        <img>
        <p>ASD</p>
        <p>321</p>
      </div>
    </div>

    <div class="hexynone"></div>

  </div>

</div>

版： 在这里创建了一个简化的代码集：https://codepen.io/shepelevstas/pen/wPOpRq/

尝试拖动任何六角形，你会看到三角形人工制品 - 天然元素的一部分。