angular drag and drop (ngDraggable) 笔记

这是原文 https://github.com/fatlinesofcode/ngDraggable

这是另一个dnd，这比较灵活，可以监听事件。我只用简单的排序功能，其他没去了解太多。有机会遇到功能扩展，会在这里更新。

 

功能与需求：

-在angular filter orderBy 里 reorder 对象。

 

基本注入一下和写些controller

 

        var app = angular.module('App', ['ngAnimate','ngDraggable']);

        app.controller("App.ctrl", ['$scope', '$timeout', function ($scope, $timeout) {

            $scope.FAQs = [

                {

                    id:1,

                    question: 'q1',

                    answer: 'a1',

                    sort : 1

                },

                {

                    id: 2,

                    question: 'q2',

                    answer: 'a2',

                    sort: 2

                },

                {

                    id: 3,

                    question: 'q3',

                    answer: 'a3',

                    sort: 3

                }

            ];

             

            $scope.onDropComplete = function (dragResource, dropResource) {       

                var sortRecord = dragResource.sort;

                dragResource.sort = dropResource.sort;

                dropResource.sort = sortRecord;



            } 

             

        }])

    </script>

 

HTML

 

<div 

    ng-repeat="FAQ in FAQs | orderBy : 'sort' : true" 

    ng-drop="true"  

    ng-drop-success="onDropComplete($data,FAQ)" 

                                    

    class="card-panel ">



    <div ng-drag="true" ng-drag-data="FAQ" class="row">

        <div class="col s10">

            <p>{{FAQ.question}}</p>

            <p>{{FAQ.answer}}</p>

        </div>

        <div class="col s2 center">

            <a class="btn-floating waves-effect waves-light"><i class="mdi-action-delete"></i></a>

            <a href="#createFAQ" class="btn-floating waves-effect waves-light modal-trigger"><i class="mdi-editor-mode-edit"></i></a>

        </div>

    </div>

</div>

 

　　

 

 CSS

	[ng-drag] {

		-moz-box-sizing: border-box;

		-webkit-box-sizing: border-box;

		box-sizing: border-box;

		-moz-user-select: -moz-none;

		-khtml-user-select: none;

		-webkit-user-select: none;

		-ms-user-select: none;

		user-select: none;

	}



	[ng-drag] {

		cursor: move;

	}



     

	[ng-drag].drag-over { 

　　　　　　　　//开始drag位置，去到其他elem是没有反应的，这里是设计错误

	}



	[ng-drag].dragging {
　　　　　　　　//开始drag位置

		background-color: #e8f5e9 ; 

	}



	[ng-drop] {

　　　　　　　　 　　

	}



	[ng-drop].drag-enter {
　　　　　　　　　//drag进入

		background-color: #f1f8e9;

	}



	[ng-drop] div {
　　　　　　//这是为了在drag时，可以在所有elem的之上

        　　position: relative;

        　　z-index: 2;

    　　}

　　

原理：

在drag complete时，出发事件，把2个对象的sort对换。