how to drag a svg rectangle in d3.js? - svg

Question

Here I am creating a rectangle named resize_icon within another rectangle positioning it at the lower right corner of the big rectangle.I want this resize_icon rectangle to be dragged freely within big rectangle but it should not cross the bigger rectangles top edge and its left edge but can be dragged anywhere else. resize[] is an array which contains id, x and y position of resize_icon rectangle.Please have a look at the following drag code and please tell me why is it not working. Also if anyone can suggest a proper code would be really helpful.
c.append('rect').attr('class','resize_icon').attr('fill','#000')
.attr('id','resize_icon'+i).attr('height',5).attr('width',5)
.attr('x', x+wd+35).attr('y',y+rectHeight-5).on(drag1)
.on('click',function(){
d3.selectAll(".selected").classed("selected",false);
d3.select(this.parentNode).classed("selected",true);
resize_rect(i);
});
var drag1 = d3.behavior.drag().origin(function()
{
var t = d3.select(this);
return {x: t.attr("x"), y: t.attr("y")};
})
.on("dragstart", dragstart)
.on("drag", dragon)
.on("dragend", dragstop);
function dragstart() {
d3.event.sourceEvent.stopPropagation();
d3.select(this).classed("drag", true);
}
function dragon() {
d3.select(this).select('.resize_icon')
.attr("x", d3.event.x)
.attr("y", d3.event.y);
id = d3.select(this).select('.resize_icon').attr("id");
a = id.replace("resize_icon", "");
resize[a].x = d3.event.x;
resize[a].y = d3.event.y;
}
function dragstop() {
d3.select(this).classed("drag", false);
}

Answer 1

Here is my code to drag between a boundary :
function button_drag2(xLower,xHigher,yLower,yHigher){
return d3.behavior.drag()
.origin(function() {
var g = this;
return {x: d3.transform(g.getAttribute("transform")).translate[0],
y: d3.transform(g.getAttribute("transform")).translate[1]};
})
.on("drag", function(d) {
g = this;
translate = d3.transform(g.getAttribute("transform")).translate;
x = d3.event.dx + translate[0],
y = d3.event.dy + translate[1];
if(x<xLower){x=xLower;}
if(x>xHigher){x=xHigher;}
if(y<yLower){y=yLower;}
if(y>yHigher){y=yHigher;}
d3.select(g).attr("transform", "translate(" + x + "," + y + ")");
d3.event.sourceEvent.stopPropagation();
});
}
}
Then call on your selection :
var selection = "#rectangle"; //change this to whatever you want to select
d3.select(selection).call(button_drag2(-100,100,-100,100));
// this lets you drag the rectangle 100px left, right, up and down. Change to what ever you want :)
Hope this helps you out :)