Chrome更新后AngularJS项目中angular-native-dragdrop拖拽功能失效

Chrome 125对HTML5拖拽API的底层行为做了变更，而停更多年的angular-native-dragdrop 1.1.2未适配该变化，导致拖拽排序后JSON数据无法同步到AngularJS scope中。以下是几种可行的解决思路：

• 补丁修复旧库
  找到angular-native-dragdrop源码中ng-drop指令的drop事件处理逻辑，在拖拽完成的回调末尾手动触发Angular的消化周期。因为Chrome 125改变了事件的异步触发时机，原库自动触发消化的逻辑失效。添加代码：

  if (!$scope.$$phase) {
    $scope.$apply();
  }
  

  或者直接调用$scope.$digest()，确保数据变更同步到视图和JSON数据源。

• 替换为维护中的拖拽库
  angular-native-dragdrop最后更新在2015年，早已不兼容现代浏览器。推荐迁移到angular-drag-and-drop-lists，它专门适配AngularJS 1.x，支持最新浏览器。只需替换指令：

  • 将原ng-drag替换为dnd-draggable
  • 将原ng-drop替换为dnd-list
    调整对应的绑定属性（比如ng-drop-success换成dnd-drop），即可快速恢复功能并避免后续浏览器更新带来的兼容问题。

• 临时降级Chrome
  若需紧急恢复业务，可临时将Chrome降级到124.x版本，该版本下旧库的拖拽逻辑仍能正常工作。但这只是权宜之计，长期必须完成库的升级或自定义改造。

• 实现原生HTML5拖拽逻辑
  抛弃旧库，直接基于原生拖拽API结合AngularJS实现：

  1. 给列表项添加draggable="true"属性
  2. 监听dragstart事件，将当前拖拽项的索引存入dataTransfer
  3. 监听dragover事件，调用event.preventDefault()允许放置
  4. 监听drop事件，获取目标位置索引，重新排序数组后调用$scope.$apply()触发数据和视图同步

内容的提问来源于stack exchange，提问作者Mina Ahmadi