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对换。