angular drag and drop (marceljuenemann) 笔记

这是原文 http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple

看起来很多功能，所以我只记入我需要的部分就好，等下次需要更多功能，再添加笔记内容。

 

简单需求：

·在dnd时，array里的对象会因为dnd而排序

·在drag时，css可以有些简单效果，引导用户使用

·不能在view里给orderBy

 

先做基本的注入

<script src="http://marceljuenemann.github.io/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>
<script>
    var app = angular.module('App', ['dndLists']); 
    ...

 

在view上只需给上属性就好

<ul dnd-list="FAQs" class="col s12"> 
    <li ng-repeat="FAQ in FAQs" 
        dnd-draggable="FAQ" 
        dnd-moved="FAQs.splice($index, 1)" 
        dnd-effect-allowed="move" 
        class="card-panel ">
        {{ FAQ.question }}
    </li>
</ul>

　　

css (简化版)

ul[dnd-list] .dndDraggingSource {
    display:none;
}

ul[dnd-list] .dndPlaceholder {
    display: block;
    background-color: #ddd;
    height:130px;
}

　　

原理：

在开始drag时，本drag的elem会display none， 同时在移动时会出现placeholder，这是让你drop的地方。

 

会遇到的问题：

由于是指令自己给elem在drop的位置，所以他只给简单的elem （<li class="dndPlaceholder"></li>）。是不是想问“如果是div被drag呢？指令是否会给同样的tagName ？

答：不是！这东西就是这里不好！同时被指令创建的elem placeholder应该具备被drag的css样式。

　　不能给orderBy（angular filter 功能），因为这plugin的demo没有给orderby做示范。我做了测试，不能兼容，因为drag的对象，drop的是位置，这样就完蛋咯～