| license: gpl-3.0 | |
| redirect: https://observablehq.com/@d3/click-vs-drag |
This example demonstrates how to disambiguate a click from a drag gesture using d3.event.defaultPrevented. Drag any circle to change its position, or click it to briefly inflate.
Note that you must be careful not to re-append the element on dragstart (mousedown), as this may prevent the browser from dispatching a click event! Instead, defer the move-to-front until the first drag event.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <style> | |
| html, | |
| body { | |
| height: 100%; | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| svg { | |
| position: absolute; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = self.frameElement ? 960 : innerWidth, | |
| height = self.frameElement ? 500 : innerHeight; | |
| var data = d3.range(20).map(function() { return [Math.random() * width, Math.random() * height]; }); | |
| var color = d3.scale.category10(); | |
| var drag = d3.behavior.drag() | |
| .origin(function(d) { return {x: d[0], y: d[1]}; }) | |
| .on("drag", dragged); | |
| d3.select("body") | |
| .on("touchstart", nozoom) | |
| .on("touchmove", nozoom) | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .selectAll("circle") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("transform", function(d) { return "translate(" + d + ")"; }) | |
| .attr("r", 32) | |
| .style("fill", function(d, i) { return color(i); }) | |
| .on("click", clicked) | |
| .call(drag); | |
| function dragged(d) { | |
| d[0] = d3.event.x, d[1] = d3.event.y; | |
| if (this.nextSibling) this.parentNode.appendChild(this); | |
| d3.select(this).attr("transform", "translate(" + d + ")"); | |
| } | |
| function clicked(d, i) { | |
| if (d3.event.defaultPrevented) return; // dragged | |
| d3.select(this).transition() | |
| .style("fill", "black") | |
| .attr("r", 64) | |
| .transition() | |
| .attr("r", 32) | |
| .style("fill", color(i)); | |
| } | |
| function nozoom() { | |
| d3.event.preventDefault(); | |
| } | |
| </script> |
