Source & Target element is same when we do Drag & Drop in touch Devices using D3 (v3.4.12 )

Question

I am doing Drop & Drop from touch device , ideally the source element & target element should not be the same.

Example I am dragging from polygon1 to polygon2 , so source should be Polygon1 & target or drop should be Polygon2 ,but in my case both are same(Polygon1).

jsfiddle.

var amatrix = [1, 0, 0, -1, 0, 500];
var svg = d3.select('body').append('svg')
    .attr('height', 500)
    .attr('width', 700);
var grp =   svg.append("g")
                  .attr("transform", "matrix(" + amatrix + ")");

grp.append('polygon')
                .attr('points', "50,50 150,50 150,150 50,150")
                .attr('stroke', '#f00')
                .attr('fill', 'red')
                .attr("id", 'Polygon_1');

grp.append('polygon')
                .attr('points', "200,200 300,200 300,300 200,300")
                .attr('stroke', '#f00')
                .attr('fill', 'blue')
                .attr("id", 'Polygon_2');
                
                
 grp.append('polygon')
                .attr('points', "350,350 450,350 450,450 350,450")
                .attr('stroke', '#f00')
                .attr('fill', 'green')
                .attr("id", 'Polygon_3');               
                
  svg.on("touchstart", function (event) {
                console.log(d3.event.srcElement.id);
                console.log('touchstart');
                d3.event.preventDefault();
                d3.event.stopPropagation();
                // event.stopPropagation();
            }, {
                passive: false
            }); 
      
  svg.on("touchend", function (event) {
                console.log(d3.event.srcElement.id);
                console.log('touchend');
                d3.event.preventDefault();
                d3.event.stopPropagation();
            }, {
                passive: false
            });