Angular Drag Example

Developer
Jeff Daze
Size
2,497 Kb
Views
4,048
  1. Angular Drag Example Previews
  2. Angular Drag Example HTML Codes
  3. Angular Drag Example CSS Codes
  4. Angular Drag Example JS Codes

How do I make an angular drag example?

Quick sketch of dragging an item with angular. What is a angular drag example? How do you make a angular drag example? This script and codes were developed by Jeff Daze on 18 January 2023, Wednesday.

Angular Drag Example Previews
IQ Test

Angular Drag Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angular Drag Example</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="test" ng-controller="testCtrl" id="container"> <div class="shape" ng-draggable='dragOptions'>Drag Me</div>
</div> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Angular Drag Example - Script Codes CSS Codes

html, body{ margin:0; padding:0; width:100%; height:100%;
}
#container { width : 100%; height: 100%; background-color: black;
}
.shape { position: absolute; width : 100px; height: 100px; background-color: white; cursor: move;
}

Angular Drag Example - Script Codes JS Codes

angular.module('test', [])
.directive('ngDraggable', function($document) { return { restrict: 'A', scope: { dragOptions: '=ngDraggable' }, link: function(scope, elem, attr) { //vars... var startX; var startY; var x = 0; var y = 0; var start; var stop; var drag; var container; var width = elem[0].offsetWidth; var height = elem[0].offsetHeight; //drag options... if (scope.dragOptions) { start = scope.dragOptions.start; drag = scope.dragOptions.drag; stop = scope.dragOptions.stop; var id = scope.dragOptions.container; if (id) { container = document.getElementById(id).getBoundingClientRect(); } } //Handle mouse events here... elem.on('mousedown', function(e) { e.preventDefault(); startX = e.clientX - elem[0].offsetLeft; startY = e.clientY - elem[0].offsetTop; $document.on('mousemove', mousemove); $document.on('mouseup', mouseup); if (start) start(e); }); function mousemove(e) { y = e.clientY - startY; x = e.clientX - startX; setPosition(); if(drag){ drag(e); } } function mouseup(e) { $document.unbind('mousemove', mousemove); $document.unbind('mouseup', mouseup); if(stop){ stop(e); } } // Move element, constrain to container if specified... function setPosition() { if (container) { if (x < container.left) { x = container.left; } else if (x > container.right - width) { x = container.right - width; } if (y < container.top) { y = container.top; } else if (y > container.bottom - height) { y = container.bottom - height; } } elem.css({ top: y + 'px', left: x + 'px' }); } } }
})
.controller('testCtrl', function($scope) { $scope.dragOptions = { start: function(e) { console.log("STARTING"); }, drag: function(e) { console.log("DRAGGING"); }, stop: function(e) { console.log("STOPPING"); }, //container: 'container'	container: '' }
});
Angular Drag Example - Script Codes
Angular Drag Example - Script Codes
Home Page Home
Developer Jeff Daze
Username jeffdaze
Uploaded January 18, 2023
Rating 3
Size 2,497 Kb
Views 4,048
Do you need developer help for Angular Drag Example?

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!

Jeff Daze (jeffdaze) Script Codes
Name
A Pen by Jeff Daze
Simple handlebars demo
Tilemap Edge CSS
JS test and Box Shadow
Circular Drag and Drop
A test card for a Munchkin-like game
An example of postMessage cross origin JS requests
Pulsing Button
Angular Drag Example
Transparent Gradient
Create amazing Facebook ads 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!