css 禁止在HTML网页中拖动

bzzcjhmw 于 2023-02-01 发布在其他

关注(0)|答案(2)|浏览(165)

我正在尝试用HTML制作一个etch-a-sketch，其中我有一个div容器，里面有很多div元素，使用CSS中的网格显示。
HTML：<div id="canvas"></div>
然后我使用JS添加div元素：

for(let i =1;i<=256;i++){
    let squareDiv = document.createElement("div");
    canvasElement.appendChild(squareDiv);
    canvasElement.setAttribute("draggable","false");}

可拖动属性不起作用。
当我点击并拖动来绘制一些东西时，它正在拖动一个模糊的图像，如下所示：

是否有一个属性可以用来禁用它？
编辑：所有javascript代码：

canvasElement =document.getElementById("canvas")

let isToggling = false;

function enableToggle(e) {
  isToggling = true;
}

function disableToggle() {
  isToggling = false;
}

function toggle(e) {
  if (isToggling === false) {
    return;
  }

  console.log('toggle:', e.target);

  e.target.classList.add('red');
}

for(let i =1;i<=256;i++){
    let squareDiv = document.createElement("div");
    canvasElement.appendChild(squareDiv);
    canvasElement.setAttribute("draggable","false");

    squareDiv.onmousedown=enableToggle;
    squareDiv.onmouseenter=toggle;
    squareDiv.onmouseup=disableToggle;
}

css

来源：https://stackoverflow.com/questions/71882017/disable-dragging-in-html-webpage

2条答案

按热度按时间

mdfafbf11#

您可以使用e.preventDefault()来防止在onmousedown事件中发生默认效果。
在enableToggle（e）函数中添加e.preventDefault（）

function enableToggle(e) {
  isToggling = true;
  e.preventDefault()
}

如果不起作用，将其添加到toggle（）和disableToggle（）

赞(0）回复(0）举报 2023-02-01

mbjcgjjk2#

我有你的确切问题与 eclipse 刻素描，这是我怎么做到的：与其他用户的回答类似，这也使用preventDefault()，但使用ondragstart HTML属性激活。
首先，使用此JS函数启用preventDefault()。

function dragstart (event) {
    event.preventDefault()
}

接下来，将dragstart (event)应用于 eclipse 刻网格中的所有元素，在我的例子中，我使用扩展语法[...nodeList]和forEach方法，该函数在生成网格方块后立即运行。

let grid = document.getElementById('grid');

function addSquare () {
let sliderValue = document.getElementById('slider').value;
  for (let i = 0; i < sliderValue ** 2; i++) {
    const square = document.createElement('div');
    square.className = 'square';
    grid.appendChild(square);
  }
}

function modifyGridProperty () {
  let square = [...document.getElementsByClassName('square')];
  square.forEach(element => {
    element.setAttribute('ondragstart', 'dragstart(event)');
  });
}

赞(0）回复(0）举报 2023-02-01

我来回答

css 禁止在HTML网页中拖动

2条答案

相关问题

热门标签

最新问答