如何在先执行的脚本中访问后续动态创建的div并实现拖拽？

问题原因 #

你当前的script2.js在页面加载完成后立即执行，此时还未点击ADD按钮创建draggable_box类的div，所以getElementsByClassName返回空集合。要实现动态创建元素的拖拽功能，有以下几种可行方案：

方案一：创建元素后直接绑定拖拽逻辑 #

修改script1.js，在创建并添加div到页面后，调用script2.js中定义的拖拽初始化函数：

script1.js 修改后： #

function add_product(){
    const add_product_div = document.createElement("div");
    add_product_div.id = "add_product";
    add_product_div.className = "draggable_box";
    add_product_div.innerHTML="<h1> hey </h1> <p> whatevea </p> ";
    document.body.appendChild(add_product_div);
    // 调用拖拽初始化函数
    initDrag(add_product_div);
}

script2.js 修改后： #

// 定义拖拽初始化函数，接收目标元素
function initDrag(element) {
    let isDragging = false;
    let startX, startY, initialX, initialY;

    // 按下鼠标时记录初始位置
    element.addEventListener('mousedown', function(e) {
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        initialX = element.offsetLeft;
        initialY = element.offsetTop;
        // 添加样式区分拖拽状态
        element.style.cursor = 'grabbing';
    });

    // 鼠标移动时更新元素位置
    document.addEventListener('mousemove', function(e) {
        if (!isDragging) return;
        e.preventDefault();
        const dx = e.clientX - startX;
        const dy = e.clientY - startY;
        element.style.left = `${initialX + dx}px`;
        element.style.top = `${initialY + dy}px`;
    });

    // 松开鼠标时结束拖拽
    document.addEventListener('mouseup', function() {
        isDragging = false;
        element.style.cursor = 'grab';
    });
}

注意：要让元素可以拖拽，需要给.draggable_box类添加定位样式，比如在页面中添加CSS：

.draggable_box {
    position: absolute;
    cursor: grab;
    padding: 10px;
    border: 1px solid #ccc;
    background: white;
}

方案二：使用事件委托（适合批量处理动态元素） #

如果后续会创建多个draggable_box元素，事件委托是更高效的方式，不需要每次创建元素都绑定事件：

script2.js 代码： #

// 给body绑定事件，监听所有子元素的拖拽相关事件
document.body.addEventListener('mousedown', function(e) {
    const target = e.target.closest('.draggable_box');
    if (!target) return;

    let isDragging = true;
    const startX = e.clientX;
    const startY = e.clientY;
    const initialX = target.offsetLeft;
    const initialY = target.offsetTop;
    target.style.cursor = 'grabbing';

    function handleMouseMove(e) {
        if (!isDragging) return;
        e.preventDefault();
        const dx = e.clientX - startX;
        const dy = e.clientY - startY;
        target.style.left = `${initialX + dx}px`;
        target.style.top = `${initialY + dy}px`;
    }

    function handleMouseUp() {
        isDragging = false;
        target.style.cursor = 'grab';
        // 移除临时绑定的事件
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
    }

    // 绑定移动和松开事件
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
});

同样需要给.draggable_box添加position: absolute的CSS样式，这种方式不管什么时候创建的draggable_box元素，都会自动拥有拖拽功能。

方案三：自定义事件通知（解耦创建和拖拽逻辑） #

如果想完全分离元素创建和拖拽逻辑，可以用自定义事件：

script1.js 修改后： #

function add_product(){
    const add_product_div = document.createElement("div");
    add_product_div.id = "add_product";
    add_product_div.className = "draggable_box";
    add_product_div.innerHTML="<h1> hey </h1> <p> whatevea </p> ";
    document.body.appendChild(add_product_div);
    // 触发自定义事件，传递创建的元素
    const event = new CustomEvent('draggableElementAdded', { detail: add_product_div });
    document.dispatchEvent(event);
}

script2.js 代码： #

// 监听自定义事件
document.addEventListener('draggableElementAdded', function(e) {
    const element = e.detail;
    // 复用拖拽初始化函数
    initDrag(element);
});

function initDrag(element) {
    let isDragging = false;
    let startX, startY, initialX, initialY;

    element.addEventListener('mousedown', function(e) {
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        initialX = element.offsetLeft;
        initialY = element.offsetTop;
        element.style.cursor = 'grabbing';
    });

    document.addEventListener('mousemove', function(e) {
        if (!isDragging) return;
        e.preventDefault();
        const dx = e.clientX - startX;
        const dy = e.clientY - startY;
        element.style.left = `${initialX + dx}px`;
        element.style.top = `${initialY + dy}px`;
    });

    document.addEventListener('mouseup', function() {
        isDragging = false;
        element.style.cursor = 'grab';
    });
}

这种方式让创建元素的逻辑和拖拽逻辑完全分离，更符合模块化的思路。

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