var myApp = angular.module("plunk", []);
myApp.controller("MainController", function ($scope) {
$scope.top_section = [
{
name: "apple",
},
{
name: "banana",
},
{
name: "orange",
},
{
name: "grapes",
},
{
name: "melon",
},
];
$scope.bottom_section = [
{
name: "kiwi",
},
{
name: "mango",
},
{
name: "pear",
},
{
name: "peach",
},
{
name: "strawberry",
},
];
$scope.lines = [];
$scope.unlink = {};
$scope.getTopPosition = function ($index) {
let elem = document.getElementById(`1_${$index}`);
elem.style.transform = "scale(0.8)";
let x = elem.offsetLeft;
let y = elem.offsetTop;
if ($scope.unlink["from"]) {
return (
($scope.unlink["to"] = { x: x + 15, y: y + 30 }), $scope.clearLine()
);
} else {
$scope.unlink["from"] = { x: x + 15, y: y + 30 };
}
};
$scope.getBottomPosition = function ($index) {
let elem = document.getElementById(`2_${$index}`);
elem.style.transform = "scale(0.8)";
let x = elem.offsetLeft;
let y = elem.offsetTop;
if ($scope.unlink["from"]) {
$scope.unlink["to"] = { x: x + 15, y: y };
} else {
return ($scope.unlink["from"] = { x: x + 15, y: y });
}
$scope.clearLine();
};
$scope.clearLine = function () {
$scope.lines.push($scope.unlink);
$scope.unlink = {};
};
});
.container section {
display: flex;
margin-bottom: 100px;
justify-content: space-between;
}
.container section.bottom {
display: flex;
justify-content: space-between;
}
.top-section {
display: flex;
flex-direction: column;
align-items: center;
}
.bottom-section {
display: flex;
flex-direction: column;
align-items: center;
}
.line {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.line svg {
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJs Demo</title>
<link rel="stylesheet" href="style.css" />
<script
data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3f3039332a37346521283b7c27123135">[email protected]</a>"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"
></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container section">
<div class="top-section" ng-repeat="t in top_section">
<span id="1_{{t.name}}" ng-click="getTopPosition(t.name)"
><svg fill="#000000" height="30px" width="30px" viewBox="0 0 490 490">
<path
d="M0,0v490h490V0H0z M430.1,332.9h-87.5v50.9h-33.1v50.9H180.4v-50.6h-33.1v-51.3H59.9v-278h46.7v66.5h38.5V54.8h40.8v66.5
h38.5V54.8h40.8v66.5h38.5V54.8h40.8v66.5H383V54.8h46.7v278.1L430.1,332.9L430.1,332.9z"
/></svg
></span>
{{t.name}}
</div>
</div>
<div class="container section bottom">
<div class="bottom-section" ng-repeat="b in bottom_section">
<span id="2_{{b.name}}" ng-click="getBottomPosition(b.name)"
><svg fill="#000000" height="30px" width="30px" viewBox="0 0 490 490">
<path
d="M0,0v490h490V0H0z M430.1,332.9h-87.5v50.9h-33.1v50.9H180.4v-50.6h-33.1v-51.3H59.9v-278h46.7v66.5h38.5V54.8h40.8v66.5
h38.5V54.8h40.8v66.5h38.5V54.8h40.8v66.5H383V54.8h46.7v278.1L430.1,332.9L430.1,332.9z"
/></svg
></span>
{{b.name}}
</div>
</div>
<span class="line">
<svg>
<line
ng-repeat="line in lines"
x1="{{line.from.x}}"
y1="{{line.from.y}}"
x2="{{line.to.x}}"
y2="{{line.to.y}}"
style="stroke: rgb(255, 0, 0); stroke-width: 2"
/>
</svg>
</span>
</body>
</html>