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    lt span gt  lt input type  checkbox  ng-model  master  gt  lt span gt SelectAll lt  span gt  lt  span gt   lt div ng-repeat  todo in todos  gt        lt div ng-hide  enableEditor  gt           lt a href     gt Drag lt  a gt           lt input id  checkSlave  type  checkbox  ng-checked  master  ng-model  todo done  gt            lt span ng-if  checked  ng-show  removed  ng-bind  todo task name  class  removed  gt  lt  span gt           lt span ng-bind  todo task name  gt  lt  span gt           lt span ng-bind  todo state  gt  lt  span gt           lt a href     ng-click  editTask todo task id todo task name editMode  editMode   gt Edit lt  a gt            lt  div gt          lt  div gt        lt div ng-show  enableEditor  gt        lt input type  text  ng-show  editMode  ng-model  todo task name   ng-change  update todo task id todo task name   gt        lt a href     ng-click  saveTask todo task id todo task name editMode  editMode   gt Save lt  a gt        lt a href     ng-click  cancelTask todo task id todo task name editMode  editMode   gt Cancel lt  a gt       lt  div gt   lt  div gt    http   plnkr co edit llTH9nRic3O2S7XMIi6y p preview

User · Answer

Modified from the angular-drag-and-drop-lists examples page  Markup   lt div class  row  gt       lt div ng-repeat   listName  list  in models lists  class  col-md-6  gt           lt ul dnd-list  list  gt               lt li ng-repeat  item in list                   dnd-draggable  item                   dnd-moved  list splice  index  1                    dnd-effect-allowed  move                   dnd-selected  models selected   item                   ng-class    selected   models selected     item                    draggable  true  gt   item label   lt  li gt           lt  ul gt       lt  div gt   lt  div gt    Angular  var app   angular module  angular-starter          ui router        dndLists       app controller  MainCtrl   function  scope         scope models             selected  null          lists    A        B                      Generate initial model     for  var i   1  i  lt   3    i             scope models lists A push  label   Item A    i             scope models lists B push  label   Item B    i                  Model to JSON for demo purpose      scope  watch  models   function model             scope modelAsJson   angular toJson model  true          true         Library can be installed via bower or npm  angular-drag-and-drop-lists

User · Answer

Angular doesn t provide snazzy UI elements like drag and drop  That s not really Angular s purpose  However  there are a few well known directives that provide drag and drop  Here are two that I ve used   https   github com angular-ui ui-sortable  https   github com codef0rmer angular-dragdrop

User · Answer

I m a bit late to the party  but I have my own directive that looks like it ll fit your case  You can adapt it yourself   It s a modification of the ng-repeat directive that s specifically built for list re-ordering via DnD  I built it as I don t like JQuery UI  preference for less libraries than anything else  also I wanted mine to work on touch screens too      Code is here  http   codepen io SimeonC pen AJIyC  Blog post is here  http   sdevgame wordpress com 2013 08 27 angularjs-drag-n-drop-re-order-in-ngrepeat

User · Answer

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    amp                              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

User · Answer

http   blog parkji co uk 2013 08 11 native-drag-and-drop-in-angularjs html This is simple method for creating native draggable angularJS elements

User · Answer

small scripts for drag and drop by angular   function angular       use strict   angular module  drag          directive  draggable   function  document        return function scope  element  attr          var startX   0  startY   0  x   0  y   0        element css          position   relative          border   1px solid red          backgroundColor   lightgrey          cursor   pointer          display   block          width   65px                  element on  mousedown   function event               Prevent default dragging of selected content         event preventDefault            startX   event screenX - x          startY   event screenY - y           document on  mousemove   mousemove            document on  mouseup   mouseup                    function mousemove event            y   event screenY - startY          x   event screenX - startX          element css             top  y    px             left   x    px                             function mouseup              document off  mousemove   mousemove            document off  mouseup   mouseup                           window angular     source link

User · Answer

Using HTML 5 Drag and Drop You can easily archive this using HTML 5 drag and drop feature along with angular directives    Enable drag by setting draggable   true  Add directives for parent container and child items  Override drag and drop functions -  ondragstart  for parent and  ondrop  for child    Find the example below in which list is array of items   HTML code        lt div class  item content  ng-repeat  item in list  draggrble-container gt           lt div class  item  draggable-item draggable  true  gt   item   lt  div gt       lt  div gt    Javascript       module directive  draggableItem  function         return         link function scope elem attr           elem 0  ondragstart   function event               scope  parent selectedItem   scope item                                           module directive  draggrbleContainer  function         return           link function scope elem attr               elem 0  ondrop   function event                   event preventDefault                    let selectedIndex   scope list indexOf scope  parent selectedItem                   let newPosition   scope list indexOf scope item                   scope  parent list splice selectedIndex 1                   scope  parent list splice newPosition 0 scope  parent selectedItem                   scope  apply                               elem 0  ondragover   function event                   event preventDefault                                                Find the complete code here https   github com raghavendrarai SimpleDragAndDrop

User · Answer

adapt-strap has very light weight module for this  here is the fiddle   Here are some attributes that are supported  There are more   ad-drag  true  ad-drag-data  car  ad-drag-begin  onDragStart  data   dragElement   event    ad-drag-end  onDataEnd  data   dragElement   event

[javascript] How to Create simple drag and Drop in angularjs

Markup

Angular

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-directive