web-dev-qa-db-fra.com

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

Je veux savoir faire glisser et déposer en utilisant AngularJs.

C'est ce que j'ai jusqu'ici:

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

javascriptangularjsangularjs-directive
47
Priya Bose

Je viens de publier ceci sur mon nouveau blog: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/

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

Démo 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;
});
71
Jason

Angular ne fournit pas d’éléments d’interface utilisateur accrocheurs comme le glisser-déposer. Ce n'est pas vraiment le but d'Angular. Cependant, il existe quelques directives bien connues qui permettent d'effectuer un glisser-déposer. Voici deux que j'ai utilisé.

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

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

25
Jon7

Je suis un peu en retard pour la fête, mais j'ai ma propre directive qui semble correspondre à votre cas (vous pouvez l'adapter vous-même). Il s'agit d'une modification de la directive ng-repeat spécialement conçue pour la réorganisation de listes via DnD. Je l'ai construit car je n'aime pas l'interface utilisateur de JQuery (préférence pour moins de bibliothèques qu'autre chose) et je voulais aussi que la mienne fonctionne aussi sur les écrans tactiles;).

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

Le billet de blog est ici: http://sdevgame.wordpress.com/2013/08/27/angularjs-drag-n-drop-re-order-in-ngrepeat/

12
Simeon Cheeseman

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 angularJS glissables natifs

8
qblooker

Modifié à partir de la page angular-drag-and-drop-listsexamples page

Markup

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

Library peut être installé via bower ou npm: angular-drag-and-drop-lists

5
Connor Leech

adapt-strap a un module très léger pour cela . voici le fiddle . 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);"
4
kashyaphp

petits scripts pour glisser-déposer 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

0
MD Ashik

Utilisation de HTML 5 Glisser-déposer
Vous pouvez facilement l’archiver à l’aide de la fonction de glisser-déposer HTML 5 et de directives angulaires.

  1. Activez le glisser en définissant draggable = true.
  2. Ajoutez des directives pour le conteneur parent et les éléments enfants.
  3. Ignorer les fonctions de glisser-déposer - "ondragstart" pour le parent et "ondrop" pour l'enfant.

Trouvez l'exemple ci-dessous dans lequel list est un tableau d'éléments .
Code HTML:

    <div class="item_content" ng-repeat="item in list" draggrble-container>
        <div class="item" draggable-item draggable="true">{{item}}</div>
    </div>

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

            };
        }
     };
    });

Trouvez le code complet ici https://github.com/raghavendrarai/SimpleDragAndDrop

0
Raghavenda Rai K