Question

我想将一个div从一个div移动到另一个div。我的解决方案在Chrome和Safari中运行正常，但Firefox给我一个问题 - 当移动范围时，它有一个不需要的背景。一旦我点击页面上的其他地方，背景就会消失，但我需要找到一种不首先出现的方法。非常感谢任何帮助。

＆＃13;

var clckdEl = null;
var clicked = function(evt) {
  var span = null;
  if (clckdEl) {
    if (clckdEl !== this) {
      span = clckdEl.children[0];
      clckdEl.removeChild(span);
      this.appendChild(span);
    }
    clckdEl.classList.remove('selected');
    clckdEl = null;
  } else if (this.children.length) {
    clckdEl = this;
    clckdEl.classList.add('selected')
  }
};
var els = document.getElementsByClassName('rect'),
  el,
  idx = 0;

for (idx = 0; idx < els.length; idx += 1) {
  el = els[idx];
  el.onclick = clicked;
}

＆＃13;

.holder {
  font: 100px Arial Unicode MS, sans-serif;
  width: 2em;
  height: 1em;
}

.rect {
  float: left;
  display: flex;
  width: 1em;
  height: 1em;
  align-items: center;
}

.rect-blue {
  background-color: blue;
}

.rect-yellow {
  background-color: yellow;
}

.letter {
  line-height: 1em;
  padding-bottom: 15%;
  margin: 0 auto;
}

.selected {
  background-color: red;
}

＆＃13;

<div class='holder'>
  <div class='rect rect-blue'>
  </div>
  <div class='rect rect-yellow'>
    <span class='letter'>X</span>
  </div>
</div>

＆＃13;

Answer 1

您只需要禁用用户选择参数。只需将此样式添加到持有者类：

  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;

JSFiddle

重新定位Firefox后的不需要的背景

1 个答案: