动态创建的可拖动列表项 JavaScript

Question

我正在动态填充参议员名单，按政治派别分开。那部分有效。我需要使每个列表项都可拖动。我无法让它工作。

我试过这个：

document.getElementById(name).setAttribute('draggable');

在我的列表填充循环中，但我真的不知道这是否正确。

senatorList.forEach(({name, party}) => {
    let itemEl = document.createElement('li');
    itemEl.textContent = name;
    let listId = party === 'Democrat' ? '#democrats' : '#republicans';
    let listEl = document.querySelector(listId);
    document.getElementById(name).setAttribute('draggable');
    listEl.appendChild(itemEl);
  });

Answer 1

您的代码包含几个错误：

setAttribute 需要两个个参数：attribute 和 value.
您在将 itemEl 添加到文档之前调用了 document.getElementById(name)。

如果我正确理解了您的意图，代码应该类似于：

const senatorList = [{
    name: 'senator1',
    party: 'Democrat'
  },
  {
    name: 'senator2',
    party: 'Democrat'
  },
  {
    name: 'senator3',
    party: 'Republican'
  },
];

senatorList.forEach(({
  name,
  party
}) => {
  let itemEl = document.createElement('li');
  itemEl.textContent = name;
  let listId = party === 'Democrat' ? '#democrats' : '#republicans';
  let listEl = document.querySelector(listId);
  itemEl.setAttribute('draggable', 'true');
  listEl.appendChild(itemEl);
});

<div id="democrats"></div>
<div id="republicans"></div>

动态创建的可拖动列表项 JavaScript

Dynamically created list items draggable JavaScript

javascript

list

draggable