wake-up-neo.com

So erstellen Sie einfaches Ziehen und Ablegen in eckigenJs

Ich möchte wissen, wie man Drag & Drop mit AngularJs macht.

Das habe ich bisher:

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

47
Priya Bose

Ich habe dies gerade in meinem brandneuen Blog gepostet: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/

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

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

Hier sind die Anweisungen, die diese auf einen UUID-Dienst angewiesen haben, den ich unten aufgeführt habe:

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

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 bietet keine schlauen UI-Elemente wie Drag & Drop. Das ist nicht wirklich Angulars Zweck. Es gibt jedoch einige bekannte Anweisungen, die Drag & Drop bereitstellen. Hier sind zwei, die ich verwendet habe.

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

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

25
Jon7

Ich bin ein bisschen spät zur Party, aber ich habe meine eigene Direktive, die so aussieht, als würde sie in Ihren Fall passen (Sie können sie selbst anpassen). Es ist eine Modifikation der ng-repeat-Direktive, die speziell für die Neuanordnung von Listen über DnD entwickelt wurde. Ich habe es gebaut, da ich JQuery UI nicht mag (Vorzug für weniger Bibliotheken als alles andere). Ich wollte auch, dass meine auf Touchscreens funktioniert;).

Code ist hier: http://codepen.io/SimeonC/pen/AJIyC

Blogpost ist hier: http://sdevgame.wordpress.com/2013/08/27/angularjs-drag-n-drop-re-order-in-ngrepeat/

12

http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html Dies ist eine einfache Methode zum Erstellen nativer ziehbarer angleJS-Elemente

8
qblooker

Modifiziert über die angle-Drag-and-Drop-ListenBeispielseite

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>

Winkelig

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

Die Library kann über Bower oder npm installiert werden: angle-Drag-and-Drop-Listen

5
Connor Leech

adapt-strap hat ein sehr leichtes Modul dafür . hier ist die Geige . Hier sind einige Attribute, die unterstützt werden. Da sind mehr.

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

kleine Skripte zum Ziehen und Ablegen mit dem Winkel

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

Quelllink

0
MD Ashik

Verwenden von HTML 5 Drag and Drop
Sie können dies einfach mit Hilfe der HTML 5-Drag & Drop-Funktion zusammen mit den Winkelanweisungen archivieren.

  1. Aktivieren Sie das Ziehen, indem Sie draggable = true setzen.
  2. Fügen Sie Anweisungen für übergeordnete Container und untergeordnete Elemente hinzu.
  3. Überschreiben Sie die Drag & Drop-Funktionen - 'ondragstart' für Eltern und 'ondrop' für Kinder.

Das folgende Beispiel zeigt, in dem list ein Array von Elementen ist .
HTML Quelltext:

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

            };
        }
     };
    });

Den vollständigen Code finden Sie hier https://github.com/raghavendrarai/SimpleDragAndDrop

0