[英]How can I select/mark an item in a list with JavaScript?
I'm trying to select an item in a DOM draggable list so that I can move it to another field with a button. 我正在尝试在DOM可拖动列表中选择一个项目,以便可以通过按钮将其移动到另一个字段。 Is there a mouseDown
or similar function to mark the selected item? 是否有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);
}
With this code I can reach all the elements I want, but I don't know how to make them selected/marked. 使用此代码,我可以找到所需的所有元素,但是我不知道如何选择/标记它们。 The results from the above code gives the following code for each element: 上面代码的结果为每个元素提供了以下代码:
<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>
You can dynamically add and remove a CSS class to the dragged element. 您可以动态地向拖动的元素添加和删除CSS类。 The following code snippet will work if you add a draggable
CSS class to the elements you want to drag - change the CSS rule to suit your requirements. 如果将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; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.