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。
您在将document.getElementById(name)添加到文档之前给itemEl打电话。

如果我正确理解了您的意图，则代码应类似于以下内容：

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

1 个答案: