Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

by jer2

HTML

<script src="http://code.angularjs.org/1.1.0/angular.js"></script>
<div ng-app="HelloApp">
    <div ng-controller="MyController">Top of the div you just dragged = {{top}}.
        <br>Id of the div you just dragged = {{lastId}}.
        <br/>
        <div id="notADirective" class="myClass" ng-click="update($event)">Not a directive.
            <br/>Drag me.</div>
        <my-div element-id="isADirective" cls="myClass">I'm a directive.
            <br/>Drag me.</div>
</div>
</div>

CSS

.myClass {
    background-color: #DA0000;
    width:100px;
    position: absolute;
}

#isADirective {
    top: 300px;
}

#notADirective {
    top: 100px;
}

JavaScript

angular.module('components', [])
    .controller('MyController', function ($scope) {

    $scope.lastId = '';
    $scope.top = '';



    $scope.setLastDraggedTopAndId = function (event) {
        var myDiv = getFirstMyClassAncestor(event.target);
        var style = window.getComputedStyle(myDiv);
        $scope.top = style.top;
        $scope.lastId = myDiv.id;
        console.log("you just dragged " + $scope.lastId + " and its new top is " + $scope.top);
        $scope.$apply();
    }


    function getFirstMyClassAncestor(element) {
        while (element.className.indexOf('myClass') < 0) {
            element = element.parentNode;
        }
        return element;
    }
        
        $scope.update = function(event) {
            $scope.setLastDraggedTopAndId(event);
        }

    $scope.drag = function (event) {
        //console.log("You are dragging " + event.target.parentNode.id);
        var startX = event.clientX;
        var startY = event.clientY;
        var elementToDrag = event.currentTarget;
        var origX = elementToDrag.offsetLeft;
        var origY = elementToDrag.offsetTop;
        var deltaX = startX - origX;
        var deltaY = startY - origY;

        document.addEventListener("mousemove", moveHandler, true);
        document.addEventListener("mouseup", upHandler, true);

        event.stopPropagation();
        event.preventDefault();

        function moveHandler(e) {
            var newX = e.clientX - deltaX;
            var newY = e.clientY - deltaY;
            elementToDrag.style.left = newX + "px";
            elementToDrag.style.top = newY + "px";
            e.stopPropagation();
        }

        function upHandler(e) {
            document.removeEventListener("mouseup", upHandler, true);
            document.removeEventListener("mousemove", moveHandler, true);
            e.stopPropagation();
            $scope.setLastDraggedTopAndId(e);
        }

    }


}).directive('myDiv', function () {
    return {
        restrict:...