Angular Drag Example
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 - 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: '' }
});
Developer | Jeff Daze |
Username | jeffdaze |
Uploaded | January 18, 2023 |
Rating | 3 |
Size | 2,497 Kb |
Views | 4,048 |
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 |
Circular Drag and Drop | 2,451 Kb |
Speed Reading | 6,553 Kb |
Tilemap Edge CSS | 2,159 Kb |
Pulsing Button | 1,659 Kb |
Simulation of famous C64 code... | 1,788 Kb |
Corner Triangle | 1,490 Kb |
Starfield using KineticJS | 3,290 Kb |
Winter Scene | 2,739 Kb |
JS test and Box Shadow | 1,906 Kb |
Attempt to implement diamond square algorithm | 2,110 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 |
Mesmerizing octopus | Jllodra | 3,549 Kb |
Beautiful canvas stars | Matths | 2,399 Kb |
SVG Circle Progress | JMChristensen | 3,368 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Incremental game | Eprouver | 5,868 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Kudos Please | TimPietrusky | 6,624 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!