Web前端：拖放元素在放置后禁用其字段和按钮的实现指南

<div class="draggable-item">
    <input type="text" id="textInputWithEvent" value="可编辑内容">
</div>

const textInputWithEvent = document.getElementById("textInputWithEvent");

// 原始的事件处理函数
function originalChangeHandler(event) {
    console.log("输入内容已改变:", event.target.value);
    // 实际的业务逻辑
}

// 在拖放前添加监听器
textInputWithEvent.addEventListener("change", originalChangeHandler);

// 拖放完成后，禁用交互
function disableInteractionByEvents() {
    // 1. 移除原有监听器（如果不再需要其逻辑）
    textInputWithEvent.removeEventListener("change", originalChangeHandler);

    // 2. 或者，添加一个阻止所有事件的监听器
    // 这种方式更通用，可以用于阻止点击、输入等多种事件
    const preventAllEvents = (event) => {
        event.preventDefault(); // 阻止默认行为
        event.stopPropagation(); // 阻止事件冒泡
    };
    textInputWithEvent.addEventListener("click", preventAllEvents, true); // 捕获阶段
    textInputWithEvent.addEventListener("keydown", preventAllEvents, true);
    textInputWithEvent.addEventListener("input", preventAllEvents, true);
}

// disableInteractionByEvents();

<div class="draggable-item" id="draggedItem">
    <input type="text" class="item-field" id="itemInput" value="可编辑内容">
    <button class="item-button" id="itemBtn">提交</button>
    <div class="info-display" id="itemInfo">一些不可编辑的信息</div>
</div>

const draggedItem = document.getElementById("draggedItem");
const itemInput = document.getElementById("itemInput");
const itemBtn = document.getElementById("itemBtn");
const itemInfo = document.getElementById("itemInfo");

function handleDropAndDisable() {
    // 1. 禁用表单元素：使用 disabled 属性
    itemInput.disabled = true;
    itemBtn.disabled = true;

    // 2. 为所有需要禁用的元素添加统一的禁用样式类
    // 这样可以统一管理视觉效果，即使是非表单元素也能有禁用状态
    itemInput.classList.add("disabled-visual");
    itemBtn.classList.add("disabled-visual");
    itemInfo.classList.add("disabled-visual"); // 对于非表单元素，禁用视觉和指针事件

    // 3. 对于非表单元素，如果需要禁用交互，可以添加 pointer-events: none;
    // 更好的做法是直接在 .disabled-visual 类中包含 pointer-events: none;
}

// 示例：在拖放完成后调用
// handleDropAndDisable();

/* 统一的禁用视觉样式 */
.disabled-visual {
    opacity: 0.7;             /* 变灰 */
    cursor: not-allowed;      /* 鼠标指针显示为禁止符号 */
    background-color: #f0f0f0; /* 改变背景色 */
    border-color: #ccc;       /* 改变边框颜色 */
    /* 对于非表单元素，确保禁用鼠标事件 */
    pointer-events: none;
}

/* 针对特定表单元素，当其被 disabled 属性禁用时，也可以添加额外样式 */
input[disabled], button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #e9e9e9;
    /* 注意：这些样式会覆盖 .disabled-visual 中冲突的属性，
       或者可以只在 .disabled-visual 中定义非冲突的样式 */
}