AngularJS Base

AngularJS project

by Felipe Alfaro

HTML

<div ap-draggable="true">Drag me bitch!</div>
<div ap-draggable="true">Drag me bitch!</div>
<div ap-droppable></div>
<div ap-droppable></div>

{{ myData }}

<div rp-context-content>
    Something!
    <div rp-context-view>
        the content!!
    </div>
</div>

CSS

* { font-family: open sans; box-sizing: border-box; }
h1, h2, h3, h4, h5 { font-weight: 400; }
h1 { text-align: center; }
h1, h2, h3, h4, h5, p { color: rgb(73, 73, 73); }

div[ap-draggable] {
    width: 50px; height: 50px; background: #004dff;
    font-size: 11px; padding: 2px; color: white;
    border-radius: 2px;
}
div[ap-droppable] {
    width: 350px; height: 50px; background: #c7d8ff; border-radius: 2px;
}

/* ap-draggable */
.ap-draggable { cursor: move; }
.ap-draggable.ap-dragging { transition: none !important; position: fixed; z-index: 1000; pointer-events: none; }
.ap-draggable.ap-dragging.ap-locating { transition: 200ms !important; }
.ap-draggablePlaceHolder { background: transparent !important; pointer-events: none !important; }
.ap-droppableEnter {
    background: red !important;
}

JavaScript

var app = angular.module('app', []);

app.controller('mainController', function($scope){
	$scope.myData = 10;
});


app.directive('rpContextContent', [function(){
	return {
        restrict: 'AE',
        controller: [function(){}],
    }
}]);

app.directive('rpContextView', [function(){
	return {
        restrict: 'A',
        require: '^rpContextContent',
        compile: function($element){
            var startComment = document.createComment(' rpContextView ');
            $element[0].parentNode.insertBefore(startComment, $element[0]);
        	$element.remove();
        }
    }
}]);

app.directive('apDraggable', ['$document', '$rootScope', function($document, $rootScope){
	return {
    	restrict: 'A',
        scope: {
        	apDraggable: '&'
        },
        link: function($scope, $element){
			$element.addClass('ap-draggable');
            var
            placeHolder,
            boundings,
            mouseDownPosition,
            drag = function(x, y){
                $element.css({
                	left: (x - (mouseDownPosition.left - boundings.left)) + 'px',
                    top: (y - (mouseDownPosition.top - boundings.top)) + 'px'
                });
            },
            draggableMouseDown = function($ev){
            	if(!$scope.apDraggable()) return;
                $ev.preventDefault();
                placeHolder = $element[0].cloneNode();
                boundings = $element[0].getBoundingClientRect();
                mouseDownPosition = {left: $ev.pageX, top: $ev.pageY};
                $element.addClass('ap-dragging');
                placeHolder.classList.add('ap-draggablePlaceHolder');
                $element.after(placeHolder);
                $document.on('mousemove', documentMouseMove);
                $document.on('mouseup mouseleave', documentMouseLeave);
                drag(mouseDownPosition.left, mouseDownPosition.top);
                $rootScope.$broadcast('draggable:start', $ev.pageX, $ev.pageY);
            },
      ...