how to drag a svg rectangle in d3.js?

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 :)