求实现HighChart容器页面拖拽的方案，需保留原有交互功能

我之前刚好遇到过完全一样的需求，已经成功落地了，分享下我的解决方案，亲测有效：

核心思路 #

HighCharts会在内部元素上绑定大量鼠标事件，默认会阻止拖拽事件的触发。我们需要精准判断点击区域：只有点击图表空白背景时才启用拖拽，点击系列、图例等元素时保留HighCharts的默认交互（比如饼图切片drilldown、图例切换）。

具体步骤 #

1. 给图表容器设置拖拽属性
   首先给你的图表容器添加draggable="true"属性：

<div id="chart-container" draggable="true"></div>

2. 绑定鼠标事件，区分点击区域
   初始化HighCharts后，给容器绑定mousedown事件，判断点击的是否是空白背景：

const chartContainer = document.getElementById('chart-container');
// 初始化你的HighCharts图表
const myChart = Highcharts.chart(chartContainer, {
  // 你的图表配置项，比如饼图、折线图等
  series: [{
    type: 'pie',
    data: [...],
    // 保留你的drilldown配置
    drilldown: true
  }]
});

chartContainer.addEventListener('mousedown', function(e) {
  // 检查点击目标是否是图表空白背景（HighCharts给背景元素加了highcharts-background类）
  if (e.target.classList.contains('highcharts-background')) {
    // 临时绑定dragstart事件，用once确保只触发一次
    e.target.addEventListener('dragstart', function(dragEvent) {
      // 传递图表容器的ID，方便后续放置时定位
      dragEvent.dataTransfer.setData('text/plain', chartContainer.id);
      // 可选：添加拖拽时的视觉反馈，比如给容器加半透明样式
      chartContainer.style.opacity = '0.7';
    }, { once: true });
  }
  // 点击其他元素（比如切片、图例）时，不做处理，保留HighCharts默认交互
});

// 拖拽结束时恢复样式
chartContainer.addEventListener('dragend', function() {
  chartContainer.style.opacity = '1';
});

3. 实现目标区域的放置逻辑
   给你想要放置图表的目标div绑定dragover和drop事件：

const targetContainer = document.getElementById('target-div');

// 必须阻止dragover的默认行为，才能触发drop事件
targetContainer.addEventListener('dragover', function(e) {
  e.preventDefault();
  // 可选：添加放置时的视觉反馈，比如高亮目标区域
  targetContainer.style.border = '2px dashed #333';
});

targetContainer.addEventListener('dragleave', function() {
  // 移除放置反馈样式
  targetContainer.style.border = 'none';
});

targetContainer.addEventListener('drop', function(e) {
  e.preventDefault();
  targetContainer.style.border = 'none';
  
  // 获取拖拽的图表容器ID
  const draggedChartId = e.dataTransfer.getData('text/plain');
  const draggedChartEl = document.getElementById(draggedChartId);
  
  // 将图表移动到目标容器
  targetContainer.appendChild(draggedChartEl);
  
  // 调用HighCharts的reflow方法，让图表适应新容器的大小
  myChart.reflow();
});

关键说明 #

• 判断空白区域：HighCharts的背景元素自带highcharts-background类，这是最准确的判断依据。如果需要扩展（比如点击坐标轴空白处也允许拖拽），可以添加对应的类判断，比如highcharts-axis等。
• 保留默认交互：因为我们只在点击空白背景时才绑定拖拽事件，其他点击事件会正常被HighCharts处理，所以饼图切片的drilldown、图例的点击切换等功能完全不受影响。
• 临时绑定dragstart：使用{ once: true }确保每次点击空白区域只绑定一次dragstart事件，避免重复绑定导致的异常。

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