Question

function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
  }

  function drop(ev) {
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
  }

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true" ondragstart="drag(event)" />

删除图像后，如何通过在函数draggable="true"中找到属性为draggable="false"的可用元素，将属性值draggable="true"更改为drop()？

Answer 1

我会使用querySelectorAll和setAttribute

document.querySelectorAll('[draggable="true"]').forEach(elem =>
  elem.setAttribute("draggable",false)
);

旧版JS

var elems = document.querySelectorAll('[draggable="true"]');
for (var i=0;i<elems.length;i++) {
  elems[i].setAttribute("draggable",false);
}

使用课程：

document.querySelectorAll('.someClass[draggable="true"]')

Answer 2

使用querySelectorAll获取所有具有draggable set to true的元素。使用setAttribute设置draggable to false

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  var data = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  ev.preventDefault();
  var elem = document.querySelector('.className');
  elem.querySelectorAll('[draggable="true"]').forEach(e => e.setAttribute('draggable', false))
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true" ondragstart="drag(event)" />

Answer 3

您可以使用

document.querySelectorAll('[draggable="true"]');

为了找到具有特定属性的元素。

请注意，这仅适用于HTML属性，对于您应使用的类

document.querySelectorAll('.classname[draggable="true"]')

如何在JavaScript中找到具有属性的元素并更改属性值？

3 个答案: