个人中心
gpt4 book ai didi

google-chrome - 使用Dart JS代码在Chrome中拖放[错误:版本35.0.1916.114 m] [确定:版本34.0.1847.137 m]

转载 作者：行者123 更新时间：2023-12-03 03:46:37 25 4
gpt4 key购买 nike

将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)

更新后，我们的代码的拖放功能在JS中不再起作用。我们使用以下拖放库: 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);
      }); 
     }
  }

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

最佳答案

我们发现，问题出在Dart中引导Angular。
仅在Google Chrome版本35.0.1916.114 m中发生此问题(在FF，IE，Safari和Chrome版本34.0.1847.137 m中则没有问题)。

DART代码

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代码 

<!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>

关于google-chrome - 使用Dart JS代码在Chrome中拖放[错误:版本35.0.1916.114 m] [确定:版本34.0.1847.137 m]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23809217/

25 4 0
文章推荐： dart - Dart 中的类对象操作列表
文章推荐： spring-boot - 在Gradle 5.x中无法使用bootRun addresources = true
文章推荐： file - Dart:访问 project|web/目录之外的资源
文章推荐： dart - Dart “NoSuchMethodError: Cannot call ” get $ data”(config.get $ data不是函数)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com