如何使用JavaScript選擇/標記列表中的項目？

Question

我正在嘗試在DOM可拖動列表中選擇一個項目，以便可以通過按鈕將其移動到另一個字段。 是否有mouseDown或類似功能來標記所選項目？

var nmbrCustomers = 10; // Enter the number of customers!
var customerArray = new Array(nmbrCustomers);

for (var i = 1;i < nmbrCustomers + 1; i++){
  customerArray[i] = "f_" + i
}

customerArray.forEach(myFunc);

function myFunc(item,index){
  console.log(document.getElementById(item).innterHTML);
}

使用此代碼，我可以找到所需的所有元素，但是我不知道如何選擇/標記它們。 上面代碼的結果為每個元素提供了以下代碼：

<td class="menuGroup" nowrap="nowrap">
  <img id="someimageID" class="navigatorGroupImage" align="left" 
    src="someimageDir" onclick="toggleGroup(9)" 
    ondragstart="dragStartGroupIcon(event)" alt="Alternar expandir/colapsar">

  <span id="someID" 
    class="navigatorGroupText" draggable="true" 
    onmousedown="mouseDownGroup('f_9', Event.extend(event))" 
    onmouseup="mouseUpGroup('f_9', Event.extend(event))" 
    onmousemove="mouseMoveGroup('f_9', Event.extend(event))" 
    title="someName.">                      
  </span>
</td>

Answer 1

您可以動態地向拖動的元素添加和刪除CSS類。 如果將draggable CSS類添加到要拖動的元素，則以下代碼段將起作用-更改CSS規則以適合您的要求。

 let sources = document.querySelectorAll('.draggable'); sources.forEach(source => { source.addEventListener('dragstart', dragStart); source.addEventListener('dragend', dragEnd); }); function dragStart(e) { // Add a 'dragging' CSS class to the element this.classList.add('dragging'); } function dragEnd(e) { // Remove the 'dragging' CSS class this.classList.remove('dragging'); } 

 .dragging { opacity: .50; border: 6px solid #000; }