Drag and drop using AngularJS (with or without jQuery), how?

Question

what I want to do is exactly this , but this is in jQuery, and I want to know if there is a way to do this in AngularJS, or if someone did it using the Angular method, and if not, how does it support that Angular allows you to configure directives to solve such problems.

I know to use jQuery, but I want to go into AngularJS and its very confusing, so I'm sorry if my question is not good enough, but all I found, and that doesn't help at all. I would really appreciate any advice you can tell me about this.

Answer 1

This is how I did it, it’s a bit more complicated since I have included the ability to add event handlers (start, drag, stop) and a container element. Here is a working fiddle to demonstrate JSFiddle Without jQuery . Here is another version fiddle 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 does your controller 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' }); } } } }) 

Answer 2

Best example of Drag and Drop with AngularJS. Designed with easy steps.

First of all, define the anguler application name (ng-app), define two directives and one controller, as follows. Also apply some css which will improve html look

Just run the snippet and enjoy the coding.

 var module = angular.module('my-app', []); module.directive('draggable', function () { return { restrict: 'A', link: function (scope, element, attrs) { element[0].addEventListener('dragstart', scope.handleDragStart, false); element[0].addEventListener('dragend', scope.handleDragEnd, false); } } }); module.directive('droppable', function () { return { restrict: 'A', link: function (scope, element, attrs) { element[0].addEventListener('drop', scope.handleDrop, false); element[0].addEventListener('dragover', scope.handleDragOver, false); } } }); function MainController($scope) { $scope.drag_types = [ {name: "Charan"}, {name: "Vijay"}, {name: "Mahesh"}, {name: "Dhananjay"}, ]; $scope.items = []; $scope.handleDragStart = function(e){ this.style.opacity = '0.4'; e.dataTransfer.setData('text/plain', this.innerHTML); }; $scope.handleDragEnd = function(e){ this.style.opacity = '1.0'; }; $scope.handleDrop = function(e){ e.preventDefault(); e.stopPropagation(); var dataText = e.dataTransfer.getData('text/plain'); $scope.$apply(function() { $scope.items.push(dataText); }); console.log($scope.items); }; $scope.handleDragOver = function (e) { e.preventDefault(); // Necessary. Allows us to drop. e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object. return false; }; } 

 .container { width: 600px; border: 1px solid #CCC; box-shadow: 0 1px 5px #CCC; border-radius: 5px; font-family: verdana; margin: 25px auto; } .container header { background: #f1f1f1; background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC ); background-image: -ms-linear-gradient( top, #f1f1f1, #CCC ); background-image: -moz-linear-gradient( top, #f1f1f1, #CCC ); background-image: -o-linear-gradient( top, #f1f1f1, #CCC ); box-shadow: 0 1px 2px #888; padding: 10px; } .container h1 { padding: 0; margin: 0; font-size: 16px; font-weight: normal; text-shadow: 0 1px 2px white; color: #888; text-align: center; } .container section { padding: 10px 30px; font-size: 12px; line-height: 175%; color: #333; } 

 <script src="http://code.angularjs.org/1.2.13/angular.js"></script> <div ng-app="my-app" ng-controller="MainController"> <div class="container"> <header><h1>Drag students from here</h1></header> <section> <div draggable="true" ng-repeat="drag_type in drag_types">{{drag_type.name}}</div> </section> </div> <div class="container"> <header><h1>Drop students here</h1></header> <section droppable="true"> <div><span>You dragged in: </span> <span ng-repeat="name in items track by $index"> <span ng-show="$index != 0">,</span> {{name}} </span> </div> </section> </div> See the JSON: <pre>{{items|json}}</pre> </div> 

Answer 3

I created a wrapper around jQueryUI draggable / droppable a long time ago. May be useful for you.

Demo: http://codef0rmer.github.com/angular-dragdrop/#/

Source: https://github.com/codef0rmer/angular-dragdrop