Question

将Chrome从版本34.0.1847.137 m更新为35.0.1916.114 m后出现此错误。在Chromium中直接运行Dart-Code没有问题。构建到JS之后会出现问题。

NoSuchMethodError : method not found: 'Symbol("effectAllowed=")'
Receiver: Instance of 'UnknownJavaScriptObject'
Arguments: ["move"]

STACKTRACE:
Error
    at dart.wrapException (http://127.0.0.1:4031/main.dart.js:3295:15)
    at UnknownJavaScriptObject.Interceptor.noSuchMethod$1 (http://127.0.0.1:4031/main.dart.js:362:15)
    at UnknownJavaScriptObject.Object.set$effectAllowed (http://127.0.0.1:4031/main.dart.js:67163:19)
    at dart.J.set$effectAllowed$x (http://127.0.0.1:4031/main.dart.js:124901:39)
    at _installDraggable_closure0.call$1 (http://127.0.0.1:4031/main.dart.js:115318:9)
    at _rootRunUnary (http://127.0.0.1:4031/main.dart.js:27280:14)
    at _ZoneDelegate.runUnary$3 (http://127.0.0.1:4031/main.dart.js:33193:58)
    at VmTurnZone__onRunUnary_closure.call$0 (http://127.0.0.1:4031/main.dart.js:14287:30)
    at VmTurnZone._onRunBase$4 (http://127.0.0.1:4031/main.dart.js:14155:17)
    at VmTurnZone._onRunUnary$5 (http://127.0.0.1:4031/main.dart.js:14176:19)

更新后的拖放＆amp;我们的代码的drop功能在JS中不再起作用了。我们使用以下Drag＆amp;删除库：https://github.com/marcojakob/dart-html5-dnd

我们使用以下装饰器：

@Decorator(
    selector: '[xpDrag]'
  )
class XpDrag{
  static final DragHandler dh = new DragHandler();
  dom.Element element;
  var mouse_down;
  var mouse_up;

  XpDrag(this.element){
    dh.dragGroup.install(element);  
    mouse_down = element.onMouseDown.listen((e)=>dh.startDrag(e));

  }
}

那些事件听众：

class DragHandler{
  static final DragHandler _singelton = new DragHandler._internal();
  dnd.DraggableGroup dragGroup = new dnd.DraggableGroup();
  dnd.DropzoneGroup dropGroup = new dnd.DropzoneGroup();
  bool listenerRegistered = false;

  DragHandler._internal(){   
    // dragGroup
    dragGroup.dropEffect = dnd.DROP_EFFECT_MOVE;
    // dropGroup
    dropGroup.install(querySelector('#stage'));
    dropGroup.accept.add(dragGroup);   
  }

  factory DragHandler(){
    return _singelton;
  }

  void startDrag(Event ele){ 

    if(!listenerRegistered){
      listenerRegistered = true;

      dragGroup.onDragStart.listen((dnd.DraggableEvent event){ 
        event.draggable.classes.add('dragiconCut');
      });

      dragGroup.onDragEnd.listen((dnd.DraggableEvent event){ 
        event.draggable.classes.remove('dragiconCut');
      });

      ... 

      dropGroup.onDrop.listen((dnd.DropzoneEvent event) {
        createNewDragElement(event.draggable.getAttribute("id"), event.mouseClientPosition);
      }); 
     }
  }

有人有同样的问题吗？或者知道解决方案？谢谢。

Answer 1

我们发现，问题来自Dart中引导Angular。该问题仅发生在Google Chrome版本35.0.1916.114 m（不在FF，IE，Safari，Chrome版本34.0.1847.137 m）。

DART-CODE

import 'dart:html';
import 'package:angular/angular.dart';
import 'package:html5_dnd/html5_dnd.dart' as dnd;
import 'package:angular/application_factory.dart';

void main() {
  //applicationFactory().addModule(new createModule());    ---> Doesn't work if not commented out

  DragHandler dh = new DragHandler();
  querySelectorAll('.dragEle').onDragStart.listen((event){
    print("drag");
  });

}

class createModule extends Module {
  createModule(){}
}

class DragHandler{
  dnd.DraggableGroup dragGroup = new dnd.DraggableGroup();
  dnd.DropzoneGroup dropGroup = new dnd.DropzoneGroup();  

  DragHandler(){
    // dragGroup
    dragGroup.installAll(querySelectorAll('.dragEle'));

    // dropGroup
    dropGroup.install(querySelector('#drop'));
    dropGroup.accept.add(dragGroup);   
  }
}

HTML-CODE

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>DndTest</title>
    <link rel="stylesheet" href="dndtest.css">
  </head>
  <body>
    <h1>DndTest</h1>

    <p>Hello world from Dart!</p>

    <div id="drag1" class="dragEle" style="left: 100px; top: 100px; height: 100px; width: 100px; position: absolute; background-color: lime;">drag1</div>
    <div id="drag2" class="dragEle" style="left: 300px; top: 100px; height: 100px; width: 100px; position: absolute; background-color: lime;">drag2</div>

    <div id="drop" style="left: 200px; top: 300px; height: 100px; width: 100px; position: absolute; background-color: maroon;">drop</div>

    <script type="application/dart" src="dndtest.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

拖拽使用Dart JS代码放入Chrome [错误：版本35.0.1916.114 m] [确定：版本34.0.1847.137 m]

1 个答案: