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;
}

如何使用JavaScript选择/标记列表中的项目？

1 个答案: