d3 click 事件在克隆元素 append 用于拖动事件后不起作用

Question

use "d3": "^3.5.17" in angular

    const dragEvent = {
      dragstarted: function(d) {
        console.log(`drag start`);
        d3.event.sourceEvent.stopPropagation();
        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);
      },
      dragged: function(d) {
        console.log(`drag`);
        d3.select('#dragging').attr('transform', `translate(${(d.x = d3.event.x)},${(d.y = d3.event.y)})`);
      },
      dragended: (d) => {
        // todo: drop call
        console.log(`dragended`);
        const dragging = document.getElementById('dragging');
        dragging.parentNode.removeChild(dragging);
      }
    };

    const drag = d3.behavior.drag()
      .origin(function(d) {
        d = {x: 0, y: 0};
        return d;
      })
      .on('dragstart', dragEvent.dragstarted)
      .on('drag', dragEvent.dragged)
      .on('dragend', dragEvent.dragended);

    d3.selectAll('.select-rect')
      .datum({x: 0, y: 0})
      .call(drag)
      .on('click', function () {
        console.log(`click`);
        if (d3.event.defaultPrevented) { return; }
        console.log(`clicked`);
      });

I am sorry first.
my English is bad.

I want to drag a new element and delete it when the drag ends.
But I have some problem with this line: node.parentNode.append(clonedG);
The click event is not working after appending the cloned element.

Am I wrong?
Or the click event handle again after drag end event?
Can anyone help me?

Answer 1

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!