Created
October 13, 2014 21:24
-
-
Save johnschimmel/2ab452665b639158ba45 to your computer and use it in GitHub Desktop.
angular draggable buttons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"> | |
| <button class="draggable" id="draggable-1" group="content">This is my content, with simple template. I don't revert.</button> | |
| <button class="draggable" id="draggable-2" group="content">Crap</button> | |
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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: 'C', | |
| 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) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .cursor { | |
| cursor: move; | |
| } | |
| .read-out { | |
| margin-top: 30px; | |
| } | |
| .dragging { | |
| border: 10px dashed #ccc; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment