score:0

I solved this issue.

 let isClick = false;
    const dragEvent = {
      dragstarted: function(d) {
        console.log(`drag start`);
        d3.event.sourceEvent.stopPropagation();
      },
      dragged: function(d) {
        if (!isClick) {
          isClick = true;
          const node = d3.select(this.parentNode).node();
          const clonedG = node.cloneNode(true);
          d3.select(clonedG).attr('id', 'dragging').classed('dragging', true).attr('opacity', 0.7);

          // problem
          node.parentNode.append(clonedG);
        }
        console.log(`drag`);
        // tslint:disable-next-line:no-shadowed-variable
        const dragging = d3.select('#dragging');
        console.log(`dragging`, dragging);
        if (dragging) {
          dragging.attr('transform', `translate(${(d.x = d3.event.x)},${(d.y = d3.event.y)})`);
        }
      },
      dragended: (d) => {
        // todo: drop call
        console.log(`dragended`);
        isClick = false;
        const dragging = document.getElementById('dragging');
        if (dragging) {
          dragging.parentNode.removeChild(dragging);
        }
      }
    };

changed dragstarted part
clone element code move to dragged part
but I don't know different.
bless you dev people!


Related Query

More Query from same tag