Skip to content

Instantly share code, notes, and snippets.

@eweitnauer

eweitnauer/Readme.md

Last active December 25, 2015 17:19
Show Gist options
  • Save eweitnauer/7012394 to your computer and use it in GitHub Desktop.
Save eweitnauer/7012394 to your computer and use it in GitHub Desktop.
Download ZIP
Direct Immediate Dragging
Raw
Readme.md

Series of examples:

The examples explore different dragging implementations along two dimensions: First, direct vs. indirect where in the former case the dragged element is determined automatically by the DOM event, while in the latter case, the hit tests on the elements are done manually. This allows, e.g., for moving several elements at once, or moving elements that are not under the mouse when the user started dragging. The second dimension is immediate position update as new mouse positions come in as dragging events or positions updates using transitions. The latter may give the feeling of a slightly smoother interaction.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Direct Immediate Dragging</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<script>
var width = 960,
height = 500;
var objs = d3.range(25).map(function () {
return {width: Math.random()*80+20,
height: Math.random()*80+20,
x: Math.random() * width,
y: Math.random() * height } });
var drag = d3.behavior.drag()
.origin(Object)
.on("drag", dragmove);
var g = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.selectAll("g")
.data(objs)
.enter()
.append("g")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.call(drag);
g.append('rect')
.attr('x', function (d) { return -d.width/2 })
.attr('y', function (d) { return -d.height/2 })
.attr('width', function (d) { return d.width })
.attr('height', function (d) { return d.height })
.style({stroke: 'lightgray', fill: 'white', 'fill-opacity': 0});
g.append("text")
.text('x')
.style('text-anchor', 'middle')
.style('dominant-baseline', 'middle')
.style('font-size', function (d) { return Math.min(d.width, d.height)+'px' })
.style('font-style', 'italic');
function dragmove(d) {
d3.select(this).call(set_transform, d.x = d3.event.x, d.y = d3.event.y);
}
function set_transform(sel, x, y) {
sel.attr('transform', "translate(" + x + "," + y + ")");
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment