【问题标题】：Prevent ghost image on dragging non-draggable elements?防止拖动不可拖动元素时出现重影？
【发布时间】：2017-05-24 05:07:02
【问题描述】：

我正在创建一个使用 HTML5 拖放 API 的网站。

但是，为了增加用户体验，我想在用户拖动不可拖动元素时防止出现重影。这甚至可能吗？

此外，默认情况下，几乎每个元素似乎都是 " 可拖动 " 。可以单击然后快速拖动浏览器中的几乎任何元素，这会创建一个幻影图像以及no-drop 光标。有什么办法可以防止这种行为？

draggable="false" 不起作用。
user-select: none 不起作用。
pointer-events: none 不起作用。
event.preventDefault() mousedown 不起作用。
event.preventDefault() 上的 dragstart 也不起作用。

我没有想法，到目前为止，要在网上找到有关此的信息非常困难。我找到了以下thread，但同样，draggable="false" 在我的情况下似乎不起作用。

以下是演示它不起作用的屏幕截图；当然你在截图中看不到我的光标，但是你可以看到我是如何把数字拖到左边的。

我相信这个问题可能与它的父级有 dragover 和 drop 相关联的事件有关。尽管如此，我还是傻眼了。

HTML

...
<body>
  ...
  <div id="backgammon-board-container">
    <div class="column" id="left-column">
      <div class="quadrant" id="third-quadrant">
        <div class="point odd top-point" id="point-13-12"><text>13</text>
          <div class="checker player-one-checker" id="checker-03" draggable="true"></div>
        </div>
      </div>
    </div>
    ...
  </div>
</body>
</html>

CSS

#backgammon-board-container {
  height: 100vh;
  width: 60vw;
  position: absolute;
  right: 0;
  display: flex;
}

  .column {
    height: 100%;
    display: flex;
    flex-direction: column; /* column-reverse for player two perspective */
  }

  #left-column {
    flex: 6;
  }

    .quadrant {
      flex: 1;
      display: flex;
    }

      .point {
        flex: 1;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

        .checker {
          z-index: 1;
          width: 48px;
          height: 48px;
          border-radius: 50%;
        }

text {
  position: fixed;
  font-family: impact;
  font-size: 24px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

  user-select: none;
  pointer-events: none;
}

JS

const p1checkers = document.getElementsByClassName('player-one-checker');
const p2checkers = document.getElementsByClassName('player-two-checker');
const pointClass = document.getElementsByClassName('point');

function setTurn(player) {
  if (player === 'p1') {
    allowCheckerMovement = p1checkers;
    disallowCheckerMovement = p2checkers;
  } else {
    allowCheckerMovement = p2checkers;
    disallowCheckerMovement = p1checkers;
  }

  // enable checker control for player
  for (var i = 0; i < allowCheckerMovement.length; i++) {
    allowCheckerMovement[i].style.cursor = 'pointer';
    allowCheckerMovement[i].setAttribute('draggable', true);
    allowCheckerMovement[i].addEventListener('dragstart', start); // for drag-and-drop.js
    allowCheckerMovement[i].addEventListener('dragend', stop);    // for drag-and-drop.js
  }

  // disable checker control for player
  for (var i = 0; i < disallowCheckerMovement.length; i++) {
    disallowCheckerMovement[i].style.cursor = 'default';
    disallowCheckerMovement[i].setAttribute('draggable', false);
    disallowCheckerMovement[i].removeEventListener('dragstart', start); // for drag-and-drop.js
    disallowCheckerMovement[i].removeEventListener('dragend', stop);    // for drag-and-drop.js
  }

  // allow drag and drop
  for (var i = 0; i < pointClass.length; i++) {
    pointClass[i].addEventListener('dragover', allowDrop); // for drag-and-drop.js
    pointClass[i].addEventListener('drop', droppedOn);     // for drag-and-drop.js
  }
}

function start(event) {
  var checker = event.target;
  event.dataTransfer.setData('text/plain', checker.id);
  event.dataTransfer.effectAllowed = 'move';
  window.requestAnimationFrame(function(){
    checker.style.visibility = 'hidden';
  });
}

function allowDrop(event) {
  event.preventDefault();
}

function droppedOn(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData('text/plain');
    event.target.appendChild(document.getElementById(data));
}

function stop(event){
  var element = event.srcElement;
  window.requestAnimationFrame(function(){
    element.style.visibility = 'visible';
  });
}

【问题讨论】：

澄清一下，您的意思是拖动选定文本？据我所知，默认情况下只能拖动图像和链接。如果这对您来说不是问题，有多种方法可以使文本无法选择。
@fay hm... 我的意思是什么，但现在你提到它，我注意到虽然你可以“拖动”任何东西，但只会出现文本的幻影图像。对于其他元素，它只是一个 no-drag 光标。奇怪。
我刚刚玩了一个快速演示，draggable="false" 使元素可拖动（draggable 的存在才是重要的，而不是价值）。删除 draggable 使元素不可拖动，即使它们有与之关联的事件。
@fay 很有趣。但是，即使我不使用该 HTML 属性也会发生这种情况。只有它的兄弟姐妹有draggable="true"，只有它的父母和兄弟姐妹有与之关联的拖动事件。 dragover 和 drop 用于父级，而dragstart 和 dragend 用于其兄弟姐妹
如果您将代码添加到您的问题中，我也许能够找到确切的原因，这听起来是间接的，我对这种情况一无所知。

标签： javascript html css browser drag-and-drop

【解决方案1】：

这就是您正在寻找的解决方案。 ;)

对于需要可拖动的任何内容，只需添加“启用拖动”CSS 类即可。

$('*:not(".enable-drag")').on('dragstart', function (e) {
    e.preventDefault();
    return false;
});

【讨论】：