how to drag drop svg elements d3v7 d3v5 working fine but same d3v7 not working d3 drag start drag end

Question

I am using D3.js for modify svg i want to update d3v5 to d3v7 but svg element drag drop not working in updated version old d3v5 working perfect in multiple svg. I have browsing the internet but i can't find a proper solution to my problem.

Promise.all([
d3.xml(svgurl),
])
.then(([mainsvg]) => {
   d3.select(".mainsvgdiv").nodes().forEach(n => {
     n.append(mainsvg.documentElement);
     d3.select(text_node)
       .attr("cursor", "move")
       d3.select(svgselctedelemnt)
       .call(d3.drag()
         .on('start', dragStarttext)
         .on('drag', draggingtext)
         .on('end', dragEndtext)
     )
   });
 });
function dragStarttext(d, i, nodes) {
    web_svg_click_count++
    d3.select(nodes[i])
    un_select_all()
}
function draggingtext(d, i, nodes) {
    this.x = this.x || 0;
    this.y = this.y || 0;
    this.x += d3.event.dx;
    this.y += d3.event.dy;
    var clicked_transform = d3.select(nodes[i]).attr("transform")
    d3.select(nodes[i])
    .attr("transform", computedTranslate)
    .classed("hightlight_active", true);
}
function dragEndtext(d, i, nodes) {
    d3.select(nodes[i])
    foreignObject_drag()
}