DDR爱好者之家

解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
站长资源 2024/12/27 佚名
23 1538
DDR爱好者之家 Design By 杰米

说明

之前有一个angular项目,页面上表单不算多，也就一百来个（这个不固定，有的地方多，有的地方少），但是再输入的时候会造成输入延迟，反应不灵敏，对用户体验极其不好。还有一个功能就是拖拽功能（原生，没有使用官方中的拖拽功能），从左边拖到右边区域，拖拽区域少的时候还挺流畅，但一旦有几百上千的时候反应极其的慢

原因("color: #ff0000">解决

  1. 对于双向绑定造成的输入延迟，停止使用双向绑定，改用单向绑定
  2. 拖拽过程angular一直检测页面变化，所以页面卡顿。我们需要做的就是设置对某些操作不跟踪变化
this.ngZone.runOutsideAngular(() => {
  this.dragEnter = this.rd.listen(spanDom, 'dragenter', this.dragenterHandler.bind(this));
  this.dragOver = this.rd.listen(spanDom, 'dragover', (e) => {
   e.preventDefault();
  });
 this.dragLeave = this.rd.listen(spanDom, 'dragleave', this.dragLeaveHandle.bind(this));
});
this.dragDrop = this.rd.listen(spanDom, 'drop', this.dropHandler.bind(this));

对频繁的操作（如dragover）不去触发变更检测。使用NgZone中的runOutsideAngular方法，angular不会对里面的变化进行跟踪。

ps:下面看下Angular 元素拖拽

  1. 拖动元素到指定区域
  2. 拖放的同时传递数据

1. 安装 ng2-drag-drop

npm install ng2-drag-drop --save

2. 模板中配置可拖拽元素

 // drag.component.html
 <div>
  <a href="javascript:;" rel="external nofollow" *ngFor="let item of sysData" draggable [dragData]="item" [dragScope]="'system'">{{ item.name }}</a>
 </div>
  • draggable - 表明此元素时可拖拽的
  • [dragData] = 'item' - 在拖动过程中将item数据从draggable到droppable
  • [dragScope]="'system'" - 拖拽范围，和第三步[dropScope]="'system'"相对应；

3. 模板中配置拖拽元素所拖拽的目的地

// drag.component.ts
 <div droppable (onDrop)="onItemDrop($event)" [dropScope]="'system'"></div>
  • droppable - 第二步中拖拽的元素都将拖拽到有droppable指令的元素内；
  • (onDrop) - 当拖拽元素至此区域内后(鼠标释放后)，触发onItemDrop方法，其中$event就是第二步中[dragData] = 'item'的item参数
  • [dropScope]="'system'" - 和第二步的[dragScope]="'system'"对应，[dragScope]="'system'"的拖拽元素只能拖拽到 [dropScope]="'system'"元素内；

4. ts文件

// drag.component.ts
export class DragComponent {

 const sysData = [
  {id: '1', name: '拖动元素1'},
  {id: '2', name: '拖动元素2'},
  {id: '3', name: '拖动元素3'},
  {id: '4', name: '拖动元素4'}
 ];

}

onItemDrop(e: any) {
 // data为拖拽时传递的数据 - item
 const data = e.dragData;
}

总结

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米