what i want to do is exactly this , but that is in jQuery and i want to know if is there a way to do that in AngularJS, or if someone has alredy done it with the Angular way, an
Here is how I did it, it is a little more complicated, since I included the ability to add event handlers (start, drag, stop), and a container element. Here is a working fiddle for demonstration JSFiddle Without jQuery. Here is another fiddle with a version using jQuery and jQueryUI [JSFiddle w/ jQuery]. Hope it helps. JSFiddle With jQuery and jQueryUI.
You can use it like this
ng-draggable='dragOptions'
where in your controller you have
$scope.dragOptions = {
start: function(e) {
console.log("STARTING");
},
drag: function(e) {
console.log("DRAGGING");
},
stop: function(e) {
console.log("STOPPING");
},
container: 'container-id'
}
Here is the directive.
.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;
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'
});
}
}
}
})