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

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

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

对于任何需要拖动的内容，只需添加'enable-drag'CSS类。

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

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

问题描述投票：1回答：1

HTML

CSS

JS

1个回答

最新问题

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

问题描述 投票：1回答：1

HTML

CSS

JS

1个回答

最新问题

问题描述投票：1回答：1