drag n drop utility for tree (nodes and connector) ,need to have handle of nodes and connector to generate eventson them. - angular JS - angularjs

Question

drag n drop utility: need to develop a tree structures with nodes and connectors. Nodes and connectors are to be manually drawn using the tool bar(manually created). On the nodes and connectors need to generate events.Using angular js. Please provide sample code.
Once clicked on the nodes the node gets created in one division and the connector can be used graphically to connect between nodes.

Answer 1

I have achieved this with d3 library which seems to be very useful.
Below is answer:
<div id="drawArea" class="division" ></div>
<script type="text/javascript">
// Create a svg canvas
var svg = d3.select("#drawArea")
.append("svg")
.attr("width", 700)
.attr("height", 500);
//Drag nodes
var drag = d3.behavior.drag()
.on("dragstart", function() {
d3.event.sourceEvent.stopPropagation()
})
.on("drag", dragmove);
//First circle
var g1 = svg.append("g")
.attr("transform", "translate(" + 150 + "," + 100 + ")")
.attr("class", "first")
.call(drag)
.append("circle").attr({
r: 20,
})
.style("fill", "#FFFF00")
//Second circle
var g2 = svg.append("g")
.attr("transform", "translate(" + 250 + "," + 300 + ")")
.attr("class", "second")
.call(drag)
.append("circle").attr({
r: 20,
})
.style("fill", "#00FF00")
svg.on('dblclick', function() {
var coords = d3.mouse(this);
console.log(coords);
drawCircle(coords[0], coords[1]);
});
function drawCircle(x, y) {
var g2 = svg.append("g")
.attr("transform", "translate(" + x + "," + y + ")")
.attr("class", "third")
.call(drag)
.append("circle").attr({
r: 20,
})
.style("fill", "#00F");
}
//Drag handler
function dragmove(d) {
var x = d3.event.x;
var y = d3.event.y;
d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
if(d3.select(this).attr("class") == "first") {
// line.attr("x1", x);
// line.attr("y1", y);
d3.select(this).attr("cx", x);
d3.select(this).attr("cy", y);
} else {
d3.select(this).attr("cx", x);
d3.select(this).attr("cy", y);
//line.attr("x2", x);
//line.attr("y2", y);
}
}
</script>