How to Create simple drag and Drop in angularjs

Question

I want to know how to do drag and drop by using AngularJs.

This is what I have so far:

<span><input type="checkbox" ng-model="master"><span>SelectAll</span></span> <div ng-repeat="todo in todos">      <div ng-hide="enableEditor">         <a href="#">Drag</a>         <input id="checkSlave" type="checkbox" ng-checked="master" ng-model="todo.done">          <span ng-if="checked" ng-show="removed" ng-bind="todo.task_name" class="removed"></span>         <span ng-bind="todo.task_name"></span>         <span ng-bind="todo.state"></span>         <a href="#" ng-click="editTask(todo.task_id,todo.task_name,editMode=!editMode)">Edit</a>          </div>        </div>      <div ng-show="enableEditor">      <input type="text" ng-show="editMode" ng-model="todo.task_name"  ng-change="update(todo.task_id,todo.task_name)">      <a href="#" ng-click="saveTask(todo.task_id,todo.task_name,editMode=!editMode)">Save</a>      <a href="#" ng-click="cancelTask(todo.task_id,todo.task_name,editMode=!editMode)">Cancel</a>     </div> </div> 

http://plnkr.co/edit/llTH9nRic3O2S7XMIi6y?p=preview..

Answer 1

I just posted this to my brand spanking new blog: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/

Code here: https://github.com/logicbomb/lvlDragDrop

Demo here: http://logicbomb.github.io/ng-directives/drag-drop.html

Here are the directives these rely on a UUID service which I've included below:

var module = angular.module("lvl.directives.dragdrop", ['lvl.services']);  module.directive('lvlDraggable', ['$rootScope', 'uuid', function($rootScope, uuid) {         return {             restrict: 'A',             link: function(scope, el, attrs, controller) {                 console.log("linking draggable element");                  angular.element(el).attr("draggable", "true");                 var id = attrs.id;                 if (!attrs.id) {                     id = uuid.new()                     angular.element(el).attr("id", id);                 }                  el.bind("dragstart", function(e) {                     e.dataTransfer.setData('text', id);                      $rootScope.$emit("LVL-DRAG-START");                 });                  el.bind("dragend", function(e) {                     $rootScope.$emit("LVL-DRAG-END");                 });             }         }     }]);  module.directive('lvlDropTarget', ['$rootScope', 'uuid', function($rootScope, uuid) {         return {             restrict: 'A',             scope: {                 onDrop: '&'             },             link: function(scope, el, attrs, controller) {                 var id = attrs.id;                 if (!attrs.id) {                     id = uuid.new()                     angular.element(el).attr("id", id);                 }                  el.bind("dragover", function(e) {                   if (e.preventDefault) {                     e.preventDefault(); // Necessary. Allows us to drop.                   }                    e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.                   return false;                 });                  el.bind("dragenter", function(e) {                   // this / e.target is the current hover target.                   angular.element(e.target).addClass('lvl-over');                 });                  el.bind("dragleave", function(e) {                   angular.element(e.target).removeClass('lvl-over');  // this / e.target is previous target element.                 });                  el.bind("drop", function(e) {                   if (e.preventDefault) {                     e.preventDefault(); // Necessary. Allows us to drop.                   }                    if (e.stopPropagation) {                     e.stopPropagation(); // Necessary. Allows us to drop.                   }                     var data = e.dataTransfer.getData("text");                     var dest = document.getElementById(id);                     var src = document.getElementById(data);                      scope.onDrop({dragEl: src, dropEl: dest});                 });                  $rootScope.$on("LVL-DRAG-START", function() {                     var el = document.getElementById(id);                     angular.element(el).addClass("lvl-target");                 });                  $rootScope.$on("LVL-DRAG-END", function() {                     var el = document.getElementById(id);                     angular.element(el).removeClass("lvl-target");                     angular.element(el).removeClass("lvl-over");                 });             }         }     }]); 

UUID service

angular .module('lvl.services',[]) .factory('uuid', function() {     var svc = {         new: function() {             function _p8(s) {                 var p = (Math.random().toString(16)+"000000000").substr(2,8);                 return s ? "-" + p.substr(0,4) + "-" + p.substr(4,4) : p ;             }             return _p8() + _p8(true) + _p8(true) + _p8();         },          empty: function() {           return '00000000-0000-0000-0000-000000000000';         }     };      return svc; });