Comment créer un simple glisser-déposer dans angularjs

Je viens d'en faire part sur mon nouveau blog: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/

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

Démonstration ici: http://logicbomb.github.io/ng-directives/drag-drop.html

Voici les directives qui dépendent d'un service UUID que j'ai inclus ci-dessous:

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

Service 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 ne fournit pas d'éléments UI snazzy comme le glisser-déposer. Ce n'est pas vraiment l'objectif d'Angular. Cependant, il existe quelques directives bien connues qui fournissent un glisser-déposer. Voici deux que j'ai utilisé.

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

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

Je suis un peu en retard pour la fête, mais j'ai ma propre directive qui semble que ça va dans votre cas (vous pouvez l'adapter vous-même). C'est une modification de la directive ng-repeat qui est spécifiquement conçue pour la réorganisation de la liste via DnD. Je l'ai construit car je n'aime pas JQuery UI (préférence pour moins de bibliothèques que toute autre chose), aussi je voulais que le mien fonctionne sur les écrans tactiles aussi;).

Le code est ici: http://codepen.io/SimeonC/pen/AJIyC

La publication du blog est ici: 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 Il s'agit d'une méthode simple pour créer des éléments angulaires JS draggeables natifs

Modifié à partir de la page d'exemples de listes angulaires de drag-and-drop-lists

Marquage

 <div class="row"> <div ng-repeat="(listName, list) in models.lists" class="col-md-6"> <ul dnd-list="list"> <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">{{item.label}}</li> </ul> </div> </div> 

Angulaire

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

La bibliothèque peut être installée via bower ou npm: angular-drag-and-drop-lists

Adaptive-strap a un module très léger pour cela. Voici le violon . Voici quelques attributs pris en charge. Il y en a plus.

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

Petits scripts pour glisser-déposer par angulaire

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

Lien source