web-dev-qa-db-ja.com

angularjsで簡単なドラッグアンドドロップを作成する方法

AngularJsを使用してドラッグアンドドロップを行う方法を知りたいです。

これは私がこれまでに持っているものです：

<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
49
Priya Bose

新しいブログをスパンキングするブランドにこれを投稿しました： http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/

ここにコード： https://github.com/logicbomb/lvlDragDrop

ここのデモ： http://logicbomb.github.io/ng-directives/drag-drop.html

これらは、以下に含めたUUIDサービスに依存するディレクティブです。

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サービス

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

Angularは、ドラッグアンドドロップなどのおしゃれなUI要素を提供しません。それは本当にAngularの目的ではありません。ただし、ドラッグアンドドロップを提供するいくつかの有名なディレクティブがあります。ここに私が使用した2つがあります。

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

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

25
Jon7

私はパーティーに少し遅れていますが、あなたのケースに合うように見える独自のディレクティブがあります（自分で調整することができます）。これは、DnDを介したリストの並べ替えのために特別に構築されたng-repeatディレクティブの変更です。私はJQuery UI（他のどのライブラリよりも少ないライブラリの好み）が好きではないので、私もそれを構築しました。

コードはこちら： http://codepen.io/SimeonC/pen/AJIyC

ブログの投稿はこちら： 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 これは、ネイティブのドラッグ可能なangleJS要素を作成するための簡単な方法です

8
qblooker

angular-drag-and-drop-lists例のページ から変更

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>

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

ライブラリはbowerまたはnpmを介してインストールできます：angular-drag-and-drop-lists

5
Connor Leech

adapt-strap には、このための非常に軽量なモジュールがあります。ここに fiddle があります。サポートされているいくつかの属性を以下に示します。もっとあります。

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

角度によるドラッグアンドドロップ用の小さなスクリプト

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

ソースリンク

0
MD Ashik

HTML 5のドラッグアンドドロップを使用する
HTML 5のドラッグアンドドロップ機能とangularディレクティブを使用して、これを簡単にアーカイブできます。

  1. Draggable = trueに設定してドラッグを有効にします。
  2. 親コンテナと子アイテムのディレクティブを追加します。
  3. ドラッグアンドドロップ機能をオーバーライドします-親は「ondragstart」、子は「ondrop」です。

listがアイテムの配列である以下の例を見つけます。
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();

            };
        }
     };
    });

ここで完全なコードを見つけてください https://github.com/raghavendrarai/SimpleDragAndDrop

0
Raghavenda Rai K