Electron中LightningChart拖拽排序引发的不安全内联样式问题

一、移除div重新实例化图表的可行性 #

完全可行，但必须正确销毁旧图表实例，避免内存泄漏。LightningChart JS提供了dispose()方法用于清理图表资源，具体步骤：

1. 初始化图表时，把每个实例存入数组/对象（比如const charts = { IncAzContChart: chartInstance, GammaChart: ... }），方便后续调用
2. 拖拽完成确定新位置后，调用charts[目标图表ID].dispose()销毁旧图表
3. 移除对应的ContainerDiv节点
4. 在目标位置创建新的ContainerDiv和内部图表容器div
5. 重新初始化图表并绑定到新容器

这种方法能解决安全提示问题，但缺点是需要重新渲染图表，数据量大时会有短暂性能损耗。

二、更简便的拖拽排序方法（推荐） #

避开innerHTML操作，直接移动DOM节点本身，彻底规避内联样式的安全问题：

方法1：纯HTML5 Drag & Drop直接移动节点 #

核心是传递DOM节点引用，拖拽结束后直接调整节点位置，不复制内容：

// 给所有chartBox绑定拖拽事件
document.querySelectorAll('.chartBox').forEach(box => {
    box.addEventListener('dragstart', (e) => {
        e.dataTransfer.setData('text/plain', box.id);
        e.dataTransfer.effectAllowed = 'move';
    });

    box.addEventListener('dragover', (e) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
    });

    box.addEventListener('drop', (e) => {
        e.preventDefault();
        const sourceId = e.dataTransfer.getData('text/plain');
        const sourceBox = document.getElementById(sourceId);
        const targetBox = e.currentTarget;
        const parent = targetBox.parentNode;
        
        // 根据位置关系插入节点
        if (sourceBox.compareDocumentPosition(targetBox) & Node.DOCUMENT_POSITION_FOLLOWING) {
            parent.insertBefore(sourceBox, targetBox);
        } else {
            parent.insertBefore(sourceBox, targetBox.nextSibling);
        }
    });
});

这种方式仅调整DOM节点顺序，不会触发内联样式的安全警告。

方法2：使用SortableJS库（更省心） #

SortableJS是轻量拖拽排序库，支持Electron，无需手动处理复杂拖拽逻辑：

1. 安装依赖：npm install sortablejs
2. 代码实现：

import Sortable from 'sortablejs';

// 假设所有chartBox都在id为chartContainer的父容器内
const container = document.getElementById('chartContainer');
Sortable.create(container, {
    animation: 150,
    ghostClass: 'sortable-ghost', // 拖拽占位样式（可选）
    onEnd: (evt) => {
        // 拖拽结束后可保存新顺序到本地
        const newOrder = Array.from(container.children).map(box => box.querySelector('div').id);
        console.log('图表新顺序:', newOrder);
    }
});

该方法直接通过库完成DOM排序，自带动画，无需处理图表实例或innerHTML，简洁高效。

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