Draggable directive
How do I make an draggable directive?
Draggable directive from the AngulaJS directive guide. What is a draggable directive? How do you make a draggable directive? This script and codes were developed by Yahya Kacem on 14 August 2022, Sunday.
Draggable directive - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Draggable directive</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="dragModule"> <span my-draggable>Drag ME</span>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Draggable directive - Script Codes CSS Codes
.draggable { cursor: pointer; position: relative; background: lightgrey; border: 1px solid red;
}
Draggable directive - Script Codes JS Codes
var app = angular.module('dragModule', []), directiveConstructor = function($document) { return function(scope, element) { var x = 0, y = 0, startX = 0, startY = 0, mousemove = function (event) { y = event.pageY - startY; x = event.pageX - startX; element.css({ top: y + 'px', left: x + 'px' }); }, mouseup = function () { $document.off('mousemove', mousemove); $document.off('mouseup', mouseup); }; element.addClass('draggable'); element.on('mousedown', function(event) { // Prevent default dragging of selected content event.preventDefault(); startX = event.pageX - x; startY = event.pageY - y; $document.on('mousemove', mousemove); $document.on('mouseup', mouseup); }); }; };
app.directive('myDraggable', ['$document', directiveConstructor]);
Developer | Yahya Kacem |
Username | yahyaKacem |
Uploaded | August 14, 2022 |
Rating | 3 |
Size | 2,277 Kb |
Views | 30,360 |
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 |
Generic component directive | 1,975 Kb |
Resizable element directive design | 2,323 Kb |
A Pen by Yahya Kacem | 2,856 Kb |
AngularJS dynamically generated list with LED status | 2,841 Kb |
Ng2 | 1,143 Kb |
Menu hover text shadow | 1,927 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 |
BenU Maintenance Site | Ksherman | 4,893 Kb |
Image Hover | Johnheiner | 3,409 Kb |
Web Spiral - p5.js | TWAIN | 2,183 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
Out of the blue | Giaco | 2,537 Kb |
Email Marketing Mock | Kristenzirkler | 8,224 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
Content Changer | Cliffpyles | 4,538 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!