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

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 的可用元素，将属性值 draggable="true" 更改为 draggable="false" ="true" 在函数 drop() 中？

Answer 1

使用querySelectorAll 获取所有draggable 设置为true 的元素。使用 setAttribute 将 draggable 设置为 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)" />