Created
August 8, 2016 13:00
-
-
Save tejpratap46/b2b772e2f60671cdb9ba93e59111d7be to your computer and use it in GitHub Desktop.
drag-able div in angularjs (http://jsfiddle.net/zargyle/35z4J/1/)
This file contains 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('test', []) | |
.directive('ngDraggable', function($document) { | |
return { | |
restrict: 'A', | |
scope: { | |
dragOptions: '=ngDraggable' | |
}, | |
link: function(scope, elem, attr) { | |
var startX, startY, x = 0, y = 0, | |
start, stop, drag, container; | |
var width = elem[0].offsetWidth, | |
height = elem[0].offsetHeight; | |
// Obtain 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(); | |
} | |
} | |
// Bind mousedown event | |
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); | |
}); | |
// Handle drag event | |
function mousemove(e) { | |
y = e.clientY - startY; | |
x = e.clientX - startX; | |
setPosition(); | |
if (drag) drag(e); | |
} | |
// Unbind drag events | |
function mouseup(e) { | |
$document.unbind('mousemove', mousemove); | |
$document.unbind('mouseup', mouseup); | |
if (stop) stop(e); | |
} | |
// Move element, within container if provided | |
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' | |
} | |
}); |
This file contains 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
<div ng-app="test" ng-controller="testCtrl"> | |
<div id="container"> | |
<div class="shape" ng-draggable='dragOptions'></div> | |
</div> | |
</div> |
This file contains 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
#container { | |
width : 300px; | |
height: 300px; | |
background-color: black; | |
} | |
.shape { | |
position: absolute; | |
width : 40px; | |
height: 40px; | |
background-color: white; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment