Skip to content

Instantly share code, notes, and snippets.

@iparwita
Created December 19, 2012 04:00
Show Gist options
  • Save iparwita/4334294 to your computer and use it in GitHub Desktop.
Save iparwita/4334294 to your computer and use it in GitHub Desktop.
Textbox In a Draggable Group Problem
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<script type="text/javascript">
var data = [{value: 1}];
var svg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500);
var dragGroup= d3.behavior.drag()
.on('drag', function(d, index) {
d.x += d3.event.dx;
d.y += d3.event.dy;
d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
});
var handleGroup = svg.selectAll('g.handleContainer').data(data);
handleGroup.enter()
.append("svg:g")
.attr('class','handleContainer')
.attr('height',200)
.attr('width',100)
.attr('x', function(d){
d.x = 10;
return d.x;
})
.attr('y', function(d){
d.y = 10;
return d.x;
})
.call(dragGroup); //Comment this line, then the textbox will be edittable
handleGroup.append("svg:rect")
.attr('fill','red')
.attr('y',40)
.attr('height',150)
.attr('width',20)
.attr('x', 0);
handleGroup
.append("svg:rect")
.attr('fill','black')
.attr('y',0)
.attr('height',40)
.attr('width',100)
.attr('x',0);
handleGroup
.append("foreignObject")
.attr("width", 80)
.attr("height", 37)
.attr('x', 10)
.attr( 'y', 5)
.append("xhtml:body")
.attr('xmlns','http://www.w3.org/1999/xhtml')
.html("<input type='text' />");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment