Basic Draggable With Angularjs?

I don't want draggable sortable elements or anything fancy, just a draggable element, like a normal jQuery div draggable object: $('#draggable').draggable(); What is the proper wa

Solution 1:

Use a directive.

Example:

angular.module("myApp").directive('andyDraggable', function() {
  return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
      var options = scope.$eval(attrs.andyDraggable); //allow options to be passed in
      elm.draggable(options);
    }
  };
});

HTML

<divandy-draggable>Drag me!</div><divandy-draggable="{key: value}">Drag me with options!</div>

Documentation on directives: http://docs.angularjs.org/guide/directive

You could also create data-binding for the element's current position during the drag, hook up events, etc. But this is a really basic version.