CODEWITHSUNDEEP
svgd3.jsdrag
Family
Family

Reputation: 1113

How can I make 2 different elements in a SVG group have different drag behaviours?

I have a group of 2 elements in d3.js. The javascript code is:

function onDragDrop(dragHandler, dropHandler) {
var drag = d3.behavior.drag();
drag.on("drag", dragHandler).on("dragstart", startHandler).on("dragend", dropHandler);
return drag;
}
function startHandler(d) {
d3.select('body').style('cursor', 'move');    
d.moveX = d.x;
d.moveY = d.y;
console.log(d.moveX + "," + d.moveY);
}
function dropHandler(d) {
d3.selectAll(".temp").remove();
d3.select('body').style('cursor', 'default');
}
function dragmove(d) {
d.moveX += d3.event.dx;
d.moveY += d3.event.dy;
d.x = Math.round(d.moveX / 50) * 50;
d.y = Math.round(d.moveY / 50) * 50;
d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
document.getElementById('lblCoord').innerHTML = "[" + (d.x) + "," + (d.y) + "]";
}
function mouseenter(d) {
document.getElementById('lblCoord').innerHTML = "[" + (d.x) + "," + (d.y) + "]";
}
function Otherdragmove(d) {
d.moveX += d3.event.dx;
d.moveY += d3.event.dy;
d3.selectAll(".temp").remove();
d3.selectAll("svg").append("line").attr("x1", d3.event.dx + 60).attr("y1", d3.event.dy + 10).attr("x2", d.moveX).attr("y2", d.moveY).attr("stroke", "black").attr("stroke-width", 2).attr("class", "temp");
}
var DrawCircle = function(container) {
var d = [{ x: 0, y: 0, moveX: 0, moveY: 0 }];
var circle = container.data(d).append("g").attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })//.call(onDragDrop(dragmove, dropHandler)).on("mouseenter", mouseenter);
circle.append("ellipse").attr("cx", 20).attr("cy", 20).attr("rx", 20).attr("ry", 20).attr("stroke", "#FF0000").attr("stroke-width", 1).attr("fill", "#FF0000");
circle.append("ellipse").attr("cx", 60).attr("cy", 20).attr("rx", 20).attr("ry", 20).attr("stroke", "#00FF00").attr("stroke-width", 1).attr("fill", "#00FF00").call(onDragDrop(Otherdragmove, dropHandler));
}
d3.selectAll("svg").remove();
var svgContainer = d3.select("#MainDiv").append("svg").attr("width", 800).attr("height", 600).attr("version", 1.1).attr("xmlns", "http://www.w3.org/2000/svg").attr("viewBox", "-40, -40, 1600, 1200");
DrawCircle(svgContainer);

I have created a fiddle here: http://jsfiddle.net/oqu8j072/6/

I want it so that if I click and drag the red circle the group of 2 circles can be moved. I also want that if I click and drag on the green circle a different action should occur, in this example it draws a line.

I can't get both to happen in the same instance.

As the code is, it generates the line being dragged from the green circle. If I uncomment the code on this line:

var circle = container.data(d).append("g").attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })//.call(onDragDrop(dragmove, dropHandler)).on("mouseenter", mouseenter);

Then clicking and dragging on any of the two circles will move them.

How is it possible to achieve the effect I want?

Upvotes: 1

Views: 559

Answers (1)

Family
Family

Reputation: 1113

The solution is only very little additional code.

In the start handler simply put the line:

d3.event.sourceEvent.stopPropagation();

I have a fiddle here:

http://fiddle.jshell.net/Lytuno8y/1/

Upvotes: 1

Related Questions