AngularJS Draggable Directive

Size
3,506 Kb
Views
38,456

How do I make an angularjs draggable directive?

An Angular directive to create draggable objects, using jQuery UI's draggable method, with the ability to change the template dynamically, group draggable objects and transclude the directive's enclosed information as content; as well communicate this content to the parent controller.. What is a angularjs draggable directive? How do you make a angularjs draggable directive? This script and codes were developed by Michael E Conroy on 03 July 2022, Sunday.

AngularJS Draggable Directive Previews

AngularJS Draggable Directive - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS Draggable Directive</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html ng-app="dragTest"> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script> <script src="http://code.angularjs.org/1.2.1/angular.min.js" type="text/javascript"></script> <script src="http://code.angularjs.org/1.2.1/angular-sanitize.min.js"></script> </head> <body class="container"> <div ng-controller="dragCtrlr"> <draggable template="/tmpls/myTemplate" id="draggable-1" group="content">This is my content, with simple template. I don't revert.</draggable> <draggable options="{addClasses: false,cursor: 'move',revert: true}" template="/tmpls/myAltTemplate" id="draggable-2" group="content" placeholder="true">Draggable 2's <span class="text-info">content here</span>, same directive using an "Alternate" template.</draggable> <draggable options="{opacity: .5,revert: true}" placeholder="true">Draggable 3's content!!<ul><li>I'm not grouped with the others</li><li>have no ID</li><li>and use the default template</li></ul></draggable> <div class="read-out"> <span class="text-info"><strong>Draggable ID</strong></span>: {{obj.id}}<br><br> <span class="text-info"><strong>Content</strong></span>: <span ng-bind-html="obj.content"></span><br><br> <span class="text-info"><strong>Actual Content</strong></span>: {{obj.content}}<br><br> </div> </div> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

AngularJS Draggable Directive - Script Codes CSS Codes

.cursor { cursor: move;
}
.read-out { margin-top: 30px;
}
.dragging { border: 1px dashed #ccc;
}

AngularJS Draggable Directive - Script Codes JS Codes

angular.module('dragTest',['ngSanitize'])
.run(['$templateCache',function($templateCache){ // default $templateCache.put('/tmpls/draggable-default','<div class="cursor" ng-transclude></div>'); // template $templateCache.put('/tmpls/myTemplate','<div class="well cursor {{obj.group}}" ng-transclude></div>'); // alternate template $templateCache.put('/tmpls/myAltTemplate','<div class="panel panel-primary cursor {{obj.group}}"><div class="panel-heading"><h3 class="panel-title">Drag Me</h3></div><div class="panel-body" ng-transclude></div></div>');
}]) // end run
.controller('dragCtrlr',['$scope',function($scope){ // variables var obj = { id: null, content: null, group: null }; $scope.obj = angular.copy(obj); // listeners $scope.$on('drag.started',function(evt,data){ if(angular.isDefined(data.obj)) $scope.obj = data.obj; }); $scope.$on('drag.stopped',function(evt,data){ $scope.obj = angular.copy(obj); // reset controller's object });
}]) // end controller(dragCtrlr)
.directive('draggable',['$compile',function($compile){ return { restrict: 'E', transclude: true, replace: true, scope: {}, templateUrl: function(el,attrs){ return (angular.isDefined(attrs.template)) ? attrs.template : '/tmpls/draggable-default'; }, link: function(scope,el,attrs,ctrlr,transFn){ // object properties, will be passed through jQuery UI events scope.obj = { id: null, content: '', group: null }; scope.placeholder = false; // get the content from the transclusion function transFn(scope,function(clone,innerScope){ // need to compile the content to make sure we get any HTML that was transcluded var dummy = angular.element('<div></div>'); dummy.append($compile(clone)(innerScope)); scope.obj.content = dummy.html(); dummy = null; // remove ng-scope spans/classes & empty class attributes added by angular to get true content scope.obj.content = scope.obj.content.replace(/<span class="ng\-scope">([^<]+)<\/span>/gi,"$1"); scope.obj.content = scope.obj.content.replace(/\s*ng\-scope\s*/gi,''); scope.obj.content = scope.obj.content.replace(/\s*class\=\"\"\s*/gi,''); }); // save the object's id if there is one if(angular.isDefined(attrs.id)) scope.obj.id = attrs.id; if(angular.isDefined(attrs.placeholder)) scope.placeholder = scope.$eval(attrs.placeholder); // setup the options object to pass to jQuery UI's draggable method var opts = (angular.isDefined(attrs.options)) ? scope.$eval(attrs.options) : {}; // assign the object's group if any if(angular.isDefined(attrs.group)){ scope.obj.group = attrs.group; opts.stack = '.' + attrs.group; } var evts = { start: function(evt,ui){ if(scope.placeholder) ui.helper.wrap('<div class="dragging"></div>'); scope.$apply(function(){ scope.$emit('drag.started',{obj: scope.obj}); }); }, drag: function(evt){ scope.$apply(function(){ scope.$emit('drag.dragging',{obj: scope.obj}); }); }, stop: function(evt,ui){ if(scope.placeholder) ui.helper.unwrap(); scope.$apply(function(){ scope.$emit('drag.stopped',{obj: scope.obj}); }); } }; // combine options passed through element attributes with events var options = $.extend({},opts,evts); el.draggable(options); // make element draggable } // end link }; // end return
}]); // end directive(draggable)
AngularJS Draggable Directive - Script Codes
AngularJS Draggable Directive - Script Codes
Home Page Home
Developer Michael E Conroy
Username m-e-conroy
Uploaded July 03, 2022
Rating 3.5
Size 3,506 Kb
Views 38,456
Do you need developer help for AngularJS Draggable Directive?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Michael E Conroy (m-e-conroy) Script Codes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!