【前端开发】ngDraggable 实现模块拖拽的基本方法及常见问题解决

本次笔记记录使用 ngDraggable 实现模块拖拽，包含以下三点内容：
1、ng-drag，ng-drop的基本使用方法；
2、元素拖动出div区域外消失问题的解决；
3、拖动元素A进入元素B时，改变元素B的css样式；

【1】ng-drag，ng-drop的基本使用方法

1、下载ngDraggable.js文件
基本使用方法及 ngDraggable.js 文件都在这里： https://github.com/fatlinesofcode/ngDraggable

2、引入ngDraggable.js文件
(*使用框架angular，打包工具 webpack;)
在webpack.config.js文件中添加ngDraggable.js文件路径：

添加ngDraggable.js前，需要先添加angular.min.js, angular 是通过npm i angular 安装的包，这里直接添加包名，内含的angular.min.js也就可用了；

3、添加依赖项

angular.module('app', ['ngDraggable']);

4、在需要拖动的元素添加 ng-drag 相关配置项：

<div ng-drag="true" ng-drag-data="{obj}" ng-drag-start="dragStart($index)" ng-drag-stop="dragStop($index)">Draggable div</div>

– 设置 ng-drag=“true”, 表示该div可以被拖动；
– ng-drag-data : 表示拖动元素时跟着被拖走的数据;
– ng-drag-start: 拖动行为开始发生时触发；
– ng-drag-move： 拖动元素移动时触发；
– ng-drag-stop: 拖动行为结束时触发, 可以 写 拖动元素没有进入目标元素前就停止拖动行为时 触发的事件；

5、在放置拖拽元素的 目标元素上添加 ng-drop 相关配置项：

<div ng-drop="true" ng-drop-success="onDropComplete($data,$idnex,$event)" >Drop area</div>

– 设置 ng-drop=“true”, 表示该div 可以放置被拖拽元素；
– ng-drop-success: 当拖拽元素拖到目标区域内完成拖拽行为（鼠标松开拖拽元素算完成）时触发；
---- $data: 被拖动的数据对象
---- $index : 表示拖动数据所落的元素的下标

完成以上5个步骤就可以实现基本的拖拽功能；

【2】子元素拖动出div区域外消失问题的解决

拖动元素拖到某一个div边界块之后就消失了，但是拖出去依然有动作效果，出现这种情况，是因为要拖动的元素的某一个父元素设置了overflow属性，无论属性值设置成auto，hidden或者是scroll，都会引起这种现象的发生。解决方法有两种：

1、[overflow 属性可以去除] 去除拖动元素 父元素的 overflow属性，或改变属性值；

2、[overflow属性是必要的属性，无法去除]
在拖动动作开始的触发事件 dragStart 中， 改变拖动元素的position属性 为 绝对定位absolute。 在拖动动作停止（鼠标松开拖拽物算停止）的触发事件 dragStop 中，将position 属性恢复或设置为 unset；我以我的项目场景举例如下：

<项目场景>： 有两个table, 一个是排班列表，一个是车主列表，两个表格都设置了最大高度，超出高度显示垂直滚动条，（滚动条属性设置overflow-y:auto,这个属性无法去除），需要实现拖动车主列表中的任一车主 到 排班列表中就自动创建班次；

<实现问题>： 车主列表由于设置了 overflow属性，导致拖动table内车主模块 出 车主列表区域 就会消失；以下是车主table代码，可拖动模块是 tbody 元素内的 tr 元素；

<div class="bootstrap-table fixed-table-container">
   <table class="table table-hover table-gray">
       <thead>
           <tr style="background-color: #F5F9FB