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!
Source: stackoverflow.com
Related Query
- d3 click event do not working after clone element append for drag event
- Click Event Not Firing After Drag (sometimes) in d3.js
- Click event not working after interation
- legends Click event not working after iteration
- D3 Differentiate between click and drag for an element which has a drag behavior
- Always suppress a click event after drag in d3
- Double click event not working on D3 version 6.1
- append not working when called for the second time
- d3.js drag node boundaries not working for linked path
- D3 Simulation not working after slider event
- Drag function not working for d3
- How to disable click event after drag stop in d3.js tree
- d3 on click for circles not working
- Horizontal Autoscroll on mouse drag is not working in D3 tree for firefox
- D3 sankey chart nodes click event not working in google chrome (58.0.3029.110) version
- D3: call() not working for appended text element (Type error)
- Drag not working properly after applying scale transform on force layout
- On click event seemingly not over the whole element
- Drag not working correctly after node transition, D3
- Click event in not working on D3 US Map, and mouseover event is working on particular states only
- D3 Force Directed Graph click event not working
- d3 drag and drop mouse click event not fire
- How to forcefully call the drag event right after the creation of an dom element in d3?
- get specific word on click event for SVG Text element
- d3.select("#element") not working when code above the html element
- Title Attribute not working for an SVG Rect on Safari
- d3.js - mouseover event not working properly on svg group
- D3 - Positioning tooltip on SVG element not working
- D3 append element only if element not exist
- d3 transition for transform translate not working for DIV
More Query from same tag
- Update backbone.js collection without re-rendering the template
- How to define handling of missing values in dc.js?
- d3.js - Collapsible Force Layout - setting variable colors to leaf nodes
- c3.js - how to show hand cursor on bar chart hover
- How to get data from d3js polyline?
- Optimize javascript loop on CSV data
- Factoring out attributes for reuse in D3 transition
- drawing the tangent to the curve knowing the point and gradient
- D3 SelectAll except one class to modify opacity
- D3 bar charts bar values display is improper
- D3 V4 ticks line x1 value
- How to make d3 sunburst starting at 3 o'clock?
- zoom/pan with d3.js and svg not working
- D3 pan/zoom behaviors don't work on mobile Safari
- Striped background in d3pie.js
- HTML tooltip cleanup in d3.js
- Where can I find good D3 event and dispatch examples?
- create visualization by word count frequency in D3.js
- how to avoid clickable of certain nodes of tree layout in d3 js
- d3.timer() frame - slowing down
- Creating a radar chart with d3 and multiple diagonal brushes
- Circle approximation that is a regular polygon with N corners
- d3 is not defined when using Webpack
- d3 donut chart transform: translateY
- Passing Object function into data() in d3
- D3 negative value bar chart
- How to show values in a tooltip
- Appending element clone to svg group in d3js
- How to bring in a d3JS javascript file to R Shiny to draw for a Force Network graph?
- How can I program a line chart using D3.js to visualise a data which is received from a server side ?