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 |
AngularJS Droppable Directive With Dynamic Template | 3,748 Kb |
AngularJS Dialog Service, with i18n | 5,197 Kb |
Sass Bourbon Tests | 2,615 Kb |
AngularJS Draggable Directive | 3,506 Kb |
Button with animated timer | 2,931 Kb |
Dragging in AngularJS | 2,859 Kb |
AngularJS Floating Menu | 4,071 Kb |
AngularJS Datalist Directive | 2,366 Kb |
AngularJS Windows | 4,665 Kb |
NgRepeat with Controller As Test | 2,482 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 |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
CSS3 Form Page Design | Rssatnam | 3,613 Kb |
STIKHOI | Denmch | 7,122 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Slider for stackoverflow | KKOKU | 3,222 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
Image Hover | Johnheiner | 3,409 Kb |
Lightrays v2 | Sinthetyc | 2,903 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!