Druggable svg

by zolotnitskiy

HTML

<script src="https://mbostock.github.com/d3/d3.js"></script>
  <body>
    <div id="checks">
    	X-axis:<input type="checkbox" id="xChecked" checked/>
    	Y-axis:<input type="checkbox" id="yChecked" checked/>
    </div>
  </body>

CSS

svg {
  border: solid 1px #aaa;
}

#checks {
  margin: 10px;
}

JavaScript

var w = 750,
    h = 450,
    r = 120;

var isXChecked = true,
    isYChecked = true;

var width = 300,
    height = 200,
    dragbarw = 20;

var drag = d3.behavior.drag()
    .origin(Object)
    .on("drag", dragmove);

var dragright = d3.behavior.drag()
    .origin(Object)
    .on("drag", rdragresize);

var dragleft = d3.behavior.drag()
    .origin(Object)
    .on("drag", ldragresize);

var dragtop = d3.behavior.drag()
    .origin(Object)
    .on("drag", tdragresize);

var dragbottom = d3.behavior.drag()
    .origin(Object)
    .on("drag", bdragresize);

var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h)

var newg = svg.append("g")
      .data([{x: width / 2, y: height / 2}]);

var dragrect = newg.append("rect")
      .attr("id", "active")
      .attr("x", function(d) { return d.x; })
      .attr("y", function(d) { return d.y; })
      .attr("height", height)
      .attr("width", width)
      .attr("fill-opacity", .5)
      .attr("cursor", "move")
      .call(drag);

var dragbarleft = newg.append("rect")
      .attr("x", function(d) { return d.x - (dragbarw/2); })
      .attr("y", function(d) { return d.y + (dragbarw/2); })
      .attr("height", height - dragbarw)
      .attr("id", "dragleft")
      .attr("width", dragbarw)
      .attr("fill", "lightblue")
      .attr("fill-opacity", .5)
      .attr("cursor", "ew-resize")
      .call(dragleft);

var dragbarright = newg.append("rect")
      .attr("x", function(d) { return d.x + width - (dragbarw/2); })
      .attr("y", function(d) { return d.y + (dragbarw/2); })
      .attr("id", "dragright")
      .attr("height", height - dragbarw)
      .attr("width", dragbarw)
      .attr("fill", "lightblue")
      .attr("fill-opacity", .5)
      .attr("cursor", "ew-resize")
      .call(dragright);

var dragbartop = newg.append("rect")
      .attr("x", function(d) { return d.x + (dragbarw/2); })
      .attr("y", function(d) { return d.y - (dragbarw/2); })
      .attr("height", dragbarw)
    ...