AngularJS Draggable Directive
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 - 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)
Developer | Michael E Conroy |
Username | m-e-conroy |
Uploaded | July 03, 2022 |
Rating | 3.5 |
Size | 3,506 Kb |
Views | 38,456 |
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!
Name | Size |
Course Layout in Angular Material | 16,237 Kb |
AngularJS Droppable Directive With Dynamic Template | 3,748 Kb |
Edit User Details in Dialog | 3,211 Kb |
NgRepeat with Controller As Test | 2,482 Kb |
AngularJS Dialog Service, with i18n | 5,197 Kb |
AngularJS Floating Menu | 4,071 Kb |
AngularJS BootStrap 3 Modal Dialogs | 3,848 Kb |
AngularJS Datalist Directive | 2,366 Kb |
AngularJS Windows | 4,665 Kb |
Button with animated timer | 2,931 Kb |
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!
Name | Username | Size |
APortfolio | Skybutterfly | 5,174 Kb |
Css3 loader | Clknap | 2,391 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
Svg sky | Omodev | 7,070 Kb |
Click handler test | Snapson | 2,329 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!