HTML

Question

我正在创建一个使用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';
  });
}

Answer 1

这是您要寻找的解决方案。 ;）

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

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

拖动不可拖动的元素时防止重影？

HTML

CSS

JS

1 个答案: