这是原文 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的是位置,这样就完蛋咯~

angular drag and drop (marceljuenemann) 笔记的更多相关文章

  1. angular drag and drop (ngDraggable) 笔记

    这是原文 https://github.com/fatlinesofcode/ngDraggable 这是另一个dnd,这比较灵活,可以监听事件.我只用简单的排序功能,其他没去了解太多.有机会遇到功能 ...

  2. angularjs drag and drop

    angular-dragula Drag and drop so simple it hurts 480 live demo angular-drag-and-drop-lists Angular d ...

  3. Angular7 Drag and Drop

    完整代码在最后,下面讲解以此代码为例 1.环境配置 1.1 安装@angular/material.@angular/cdk cnpm install --save @angular/material ...

  4. 拖放API中的drag和drop实战

    原文地址:→传送门 写在前面 在HTML5之前,实现拖放功能需要借助mousedown/mousemove/mouseover/mouseout/mouseup等鼠标事件来完成,HTML5中拖放API ...

  5. Angular Material (Components Cdk) 学习笔记 Table

    refer : https://material.angular.io/cdk/table/overview https://material.angular.io/components/table/ ...

  6. WPF开发快速入门【7】WPF的拖放功能(Drag and Drop)

    概述 本文描述WPF的拖放功能(Drag and Drop). 拖放功能涉及到两个功能,一个就是拖,一个是放.拖放可以发生在两个控件之间,也可以在一个控件自己内部拖放.假设界面上有两个控件,一个Tre ...

  7. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  8. 通过HTML5的Drag and Drop生成拓扑图片Base64信息

    HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...

  9. 基于HTML5的Drag and Drop生成图片Base64信息

    HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...

随机推荐

  1. CentOS 7修复MBR和GRUB

    (转载) 一.修复MBR: MBR(Master Boot Record主引导记录): 硬盘的0柱面.0磁头.1扇区称为主引导扇区.其中446Byte是bootloader,64Byte为Partit ...

  2. perl访问数组中变量

    数组一个是存储标量值的无序列表变量. 数组变量以 @ 开头.访问数组元素使用 $ + 变量名称 + [索引值] 格式来读取,实例如下: #!/usr/bin/perl @names = (" ...

  3. LNMP 快速安装

    网址是:http://lnmp.org/install.html 值得注意的是:它基本上把所有的扩展都装上了,有点冗余 安装完成后,根目录的位置是 /home/wwwroot/default LNMP ...

  4. iOS 登陆之界面设置

    1.界面构成 1.1. 效果图 1.2. 元素 背景图 用户名的输入框 密码的输入框 登陆按钮 忘记密码 用户注册 第三方登陆 两个分割线

  5. 超棒的30款JS类库和工具

    http://www.csdn.net/article/2013-07-01/2816068-best-javascript-libraries-and-tools

  6. treegrid.bootstrap使用说明

    treegrid.bootstrap使用说明 这个插件是用来做有层次的表格的,大概如图: 官网  http://maxazan.github.io/jquery-treegrid/ 使用这个控件之前需 ...

  7. Spring xml中进行autowired的方式

    可以在xml文件中进行autowired: xml: <?xml version="1.0" encoding="UTF-8"?> <bean ...

  8. POJ2774(二分+哈希)

    Long Long Message Time Limit: 4000MS   Memory Limit: 131072K Total Submissions: 27234   Accepted: 11 ...

  9. C++ 头文件系列(iosfwd)

    简介 输入输出历来都是语言的重要部分,在C++中,该库也是占据了相当大的一部分. C++的输入输出库是其遵循面向对象设计的结果,并结合了泛型编程. 以下是这些库类的关系图(箭头标示继承,白框表示摸板, ...

  10. linux之sed的常用操作

    Sed命令: sed是一种流编辑器,它是文本处理中非常中的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(patter ...