如何使用d3使HTML div可拖动

<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-drag/3.0.0/d3-drag.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div id="draggableDiv" style="width: 200px; height: 200px; background-color: #ccc;"></div>

// 获取可拖动的div元素
var draggableDiv = d3.select("#draggableDiv");

// 使用D3的drag函数创建拖动行为
var drag = d3.drag()
  .on("start", dragStart)
  .on("drag", dragging)
  .on("end", dragEnd);

// 将拖动行为应用到可拖动的div元素上
draggableDiv.call(drag);

// 定义拖动开始时的回调函数
function dragStart() {
  // 在拖动开始时执行的操作
}

// 定义拖动过程中的回调函数
function dragging() {
  // 在拖动过程中执行的操作
  // 可以通过d3.event.x和d3.event.y获取当前鼠标位置
  draggableDiv.style("left", d3.event.x + "px")
    .style("top", d3.event.y + "px");
}

// 定义拖动结束时的回调函数
function dragEnd() {
  // 在拖动结束时执行的操作
}