JavaScript技术问题：如何用getElementsByClassName获取鼠标选中元素

嘿，我注意到你在尝试用getElementsByClassName实现元素拖拽功能，但这里有个容易踩的小坑哦～

问题根源 #

document.getElementsByClassName()返回的不是单个DOM元素，而是一个HTMLCollection（类数组对象）。你直接给这个集合绑定ondragstart事件是不会生效的，因为这个集合本身并没有ondragstart这个事件方法，只有单个DOM元素才支持绑定这类事件。

修正方案 #

你需要遍历这个集合里的每一个元素，给它们逐个绑定拖拽事件。下面是两种可行的写法：

写法1：遍历HTMLCollection（兼容旧浏览器）

var dragItems = document.getElementsByClassName("dragElement");
var dropLoc = document.getElementById("dropLocation");

// 循环遍历每个拖拽元素，绑定ondragstart事件
for (var i = 0; i < dragItems.length; i++) {
    dragItems[i].ondragstart = function(evt) {
        evt.dataTransfer.setData('key', evt.target.id);
        console.log("its dragging....");
    }
}

dropLoc.ondragover = function(evt) {
    console.log("its dragover....");
    evt.preventDefault();
}

dropLoc.ondrop = function(evt) {
    console.log("its dropped....");
    var dropItemId = evt.dataTransfer.getData('key');
    var dropItem = document.getElementById(dropItemId);
    evt.preventDefault();
    // 这里添加将元素放入目标位置的逻辑，示例：
    dropLoc.appendChild(dropItem);
}

写法2：用querySelectorAll实现更简洁的遍历（现代浏览器推荐）

document.querySelectorAll()返回的是NodeList，支持forEach方法，代码会更清爽：

const dragItems = document.querySelectorAll(".dragElement");
const dropLoc = document.getElementById("dropLocation");

// 用forEach批量绑定事件
dragItems.forEach(item => {
    item.ondragstart = (evt) => {
        evt.dataTransfer.setData('key', evt.target.id);
        console.log("its dragging....");
    };
});

dropLoc.ondragover = (evt) => {
    console.log("its dragover....");
    evt.preventDefault();
};

dropLoc.ondrop = (evt) => {
    console.log("its dropped....");
    const dropItemId = evt.dataTransfer.getData('key');
    const dropItem = document.getElementById(dropItemId);
    evt.preventDefault();
    dropLoc.appendChild(dropItem);
};

额外补充：如果要获取鼠标选中的元素 #

如果你的需求是只允许鼠标选中（比如点击选中）的元素拖拽，可以添加点击事件记录选中状态：

let selectedItem = null;
const dragItems = document.querySelectorAll(".dragElement");
const dropLoc = document.getElementById("dropLocation");

dragItems.forEach(item => {
    // 点击时标记选中元素
    item.addEventListener('click', () => {
        // 清除之前选中元素的标识
        if (selectedItem) {
            selectedItem.classList.remove('selected');
        }
        selectedItem = item;
        item.classList.add('selected'); // 给选中元素加样式标识
    });
    
    item.ondragstart = (evt) => {
        // 只允许选中的元素触发拖拽
        if (selectedItem !== item) return;
        evt.dataTransfer.setData('key', evt.target.id);
        console.log("its dragging....");
    };
});

// 剩下的dragover和drop逻辑和之前一致
dropLoc.ondragover = (evt) => {
    console.log("its dragover....");
    evt.preventDefault();
};

dropLoc.ondrop = (evt) => {
    console.log("its dropped....");
    const dropItemId = evt.dataTransfer.getData('key');
    const dropItem = document.getElementById(dropItemId);
    evt.preventDefault();
    dropLoc.appendChild(dropItem);
};

内容的提问来源于stack exchange，提问作者Olivier