angularjsHow do I implement drag and drop functionality using AngularJS?
To implement drag and drop functionality using AngularJS, you can use the HTML5 Drag and Drop API. The following code example demonstrates how to use the API for drag and drop functionality in AngularJS:
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-drag="true" ng-drag-data="myData">Drag Me</div>
<div ng-drop="true" ng-drop-success="onDropComplete($data,$event)">Drop Here</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myData = {data: 'myData'};
$scope.onDropComplete = function (data,evt) {
console.log("drop success, data:", data);
}
});
</script>
This code example will create two div elements, one with the ng-drag
directive and one with the ng-drop
directive. When the ng-drag
element is dragged and dropped onto the ng-drop
element, the onDropComplete
function will be called with the data from the ng-drag
element and the event object as parameters.
Code explanation
ng-app="myApp"
: This directive defines the AngularJS application.ng-controller="myCtrl"
: This directive defines the controller for the application.ng-drag="true"
andng-drop="true"
: These directives enable the drag and drop functionality.ng-drag-data="myData"
: This directive sets the data to be transferred when the element is dragged.ng-drop-success="onDropComplete($data,$event)"
: This directive sets the function to be called when the element is dropped.
For more information on implementing drag and drop functionality using AngularJS, see the AngularJS Drag and Drop tutorial.
More of Angularjs
- How can I become an Angular expert from a beginner level?
- How can I create an editable AngularJS application?
- How can I use the Yandex Map API with AngularJS?
- How can I use Angular to zoom in and out of a div?
- How do I install Yarn using Angular?
- How do I use AngularJS to zoom in on an image?
- How do I use Angular Zone to run my code?
- How do I use Angular to zip files?
- How do I use Angular Zone to detect and run Angular change detection?
- How do I copy an element in AngularJS?
See more codes...