Here is my angularjs directive code
angular.module('test', []).directive('hello', function() {
return {
restrict : 'E',
template : '<div style="position: relative"><img id="mr" class="drag-image" src="http://www.vancouverconventioncentre.com/wp-content/themes/mobile_pack_base/img/about-us-icon.png" style="position: absolute;" /></div>',
replace: true,
link : function(scope, element, attrs) {
jQuery("#mr").on("keydown", function (){
$("#mr").draggable();
});
}
};
})
And here is the html code
<div ng-app="test">
<hello>
<img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="position: absolute;" />
</hello>
</div>
What i'm trying to do is drag an image (jqueryui.com/draggable) using an angular js directive.But its not working. Here is a jsfiddle
Have a look at
https://github.com/ganarajpr/Angular-UI-Components/blob/master/js/directives.js#L28
which is essentially
myApp.directive('drag',function() {
return function(scope, elm, attrs) {
elm.draggable({ containment: attrs.drag});
elm.css({zIndex:2000});
};
});
Now you can use an attribute level directive on any element and it will become draggable.
For example :
<div drag="parent"></div>
Seeing your fiddle it looks like you have not included JQuery UI which is probably one of the reason's why your code is not working. Please include Jquery, JQuery UI and Angular libraries before attempting this.
include jQuery and jQuery UI and by adding this function you should be able to drag your image:
$(function() {
$( "#marker" ).draggable();
});
if you want the image to only be draggable in a specific area , check out the API reference up there -> http://api.jqueryui.com/draggable/
you can make the parent ( div ? ) element the bounding box.
hope that's what you're looking for.