Menu
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 way to do this through Angular? Do I still use jQueryUI, or is there anything in AngularUI I can use? I looked through both Angular libraries but didn't find anything specifically addressing draggable objects.
937
To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled: images, files, links, files, or any markup on your page. Our example creates an interface to rearrange columns that have been laid out with CSS Grid.
The draggable (option) method specifies that an HTML element can be moved in the HTML page. Here, the option parameter specifies the behavior of the elements involved. Syntax: $(selector, context).
You can use the drag event: $('#dragThis'). draggable({ drag: function() { var offset = $(this). offset(); var xPos = offset.
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
<div andy-draggable>Drag me!</div> <div andy-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.
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
