Como criar um simples arrastar e soltar em angularjs

Eu quero saber como fazer arrastar e soltar usando AngularJs.

Isto é o que eu tenho até agora:

SelectAll   

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

Acabei de postar isso em meu blog novo: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/

Código aqui: https://github.com/logicbomb/lvlDragDrop

Demonstração aqui: http://logicbomb.github.io/ng-directives/drag-drop.html

Aqui estão as diretivas que dependem de um serviço UUID que incluímos abaixo:

 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"); }); } } }]); 

Serviço UUID

 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; }); 

Angular não fornece elementos da interface do usuário, como arrastar e soltar. Esse não é o propósito da Angular. No entanto, existem algumas diretivas bem conhecidas que fornecem arrastar e soltar. Aqui estão dois que eu usei.

https://github.com/angular-ui/ui-sortable

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

Estou um pouco atrasado para a festa, mas eu tenho minha própria diretiva que parece caber no seu caso (Você pode adaptá-la você mesmo). É uma modificação da diretiva ng-repeat, criada especificamente para reordenamento de listas via DnD. Eu construí-lo como eu não gosto de JQuery UI (preferência por menos bibliotecas do que qualquer outra coisa) também queria que o meu trabalhasse em canvass de toque também;).

Código está aqui: http://codepen.io/SimeonC/pen/AJIyC

A postagem do blog está aqui: http://sdevgame.wordpress.com/2013/08/27/angularjs-drag-n-drop-re-order-in-ngrepeat/

http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html Este é um método simples para criar elementos angularJS arrastáveis ​​nativos

Modificado a partir da página de exemplos de arrastar e soltar angular

Marcação

 
  • {{item.label}}

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 <= 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); }); 

A biblioteca pode ser instalada via bower ou npm: listas de arrastar e soltar angulares

adapt-strap tem um módulo muito leve para isso. aqui está o violino . Aqui estão alguns atributos que são suportados. Há mais.

 ad-drag="true" ad-drag-data="car" ad-drag-begin="onDragStart($data, $dragElement, $event);" ad-drag-end="onDataEnd($data, $dragElement, $event);" 

pequenos scripts para arrastar e soltar por 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); 

link de origem