dart - AngularDart应用程序未触发放置事件，但是触发了拖动事件

我关于SO的第一篇文章!

简而言之，我正在研究在AngularDart项目中使用的Dart拖放库。我创建了一个示例存储库(https://bitbucket.org/johnryanancoa/componentdecorator/src/)。标签产生所需的标记，装饰器将相关事件附加到该标记上。当事件触发时，Drag事件将消息正确打印到控制台。但是，Drop事件没有触发。

任何人都可以阐明这一点吗？我想我在使用Futures时会犯错误，尽管希望您能指点一下。

先感谢您。约翰

更新:按照@slawson的建议，从上述存储库中添加相关的代码段

== main.html ==

<body>
    <my-component class="my-component" my-decorator></my-component>
    ...
</body>

== main.dart ==

import 'package:logging/logging.dart';

import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

import 'package:componentDecorator/component/component.dart';
import 'package:componentDecorator/component/decorator.dart';

String _delimiter = "-";

class MyMod extends Module {
    final Logger log = new Logger('componentDecorator');

    MyMod() {
        bind(MyCoolDecorator);
        bind(MyCoolComponent);
    }
}

void main() {
    Logger.root.level = Level.ALL;
    Logger.root.onRecord.listen((LogRecord rec) {
        print('[${rec.level.name}: ${rec.loggerName}] ${_delimiter} ${rec.message}');
    });

    applicationFactory()
            .addModule(new MyMod())
            .run();
}

== component.dart ==

library mycomponent;

import 'dart:core';
import 'dart:html';

import 'package:angular/angular.dart';
import 'package:logging/logging.dart';

@Component(
    selector: 'my-component',
    templateUrl: 'packages/componentDecorator/component/component.html',
    cssUrl: 'packages/componentDecorator/component/component.css',
    publishAs: 'comp'
) class MyCoolComponent {

    MyCoolComponent(final Element element) {
        Logger.root.fine("MyCoolComponent(): element = $element, element.attributes = ${element.attributes.keys}");
    }
}

== component.html ==

<ul dnd dnd-dropzone>
    <li dnd dnd-draggable>one</li>
    <li dnd dnd-draggable>three</li>
    <li dnd dnd-draggable>five</li>
</ul>

<ul dnd dnd-dropzone class="even">
    <li dnd dnd-draggable>two</li>
    <li dnd dnd-draggable>four</li>
    <li dnd dnd-draggable>six</li>
</ul>

== decorator.dart ==

library mydecorator;

import 'dart:core';
import 'dart:html';
import 'dart:async';

import 'package:angular/angular.dart';

import 'package:componentDecorator/dnd/dnd.dart';

@Decorator(
    selector: '[my-decorator]'
) class MyCoolDecorator extends AttachAware {

    final Element element;

    MyCoolDecorator(this.element);

    void attach() {
        new Future(() {
            var _el;
            if (element.shadowRoot != null) {
                _el = element.shadowRoot;
            } else {
                _el = element;
            }

            // common
            print("${_el.hashCode} el: ${_el}");

            print("${_el.hashCode} el.draggable: ${_el.querySelectorAll('[dnd-draggable]').length}");
            Draggable draggable = new Draggable(_el.querySelectorAll('[dnd-draggable]'), avatarHandler: new AvatarHandler.clone())
                    ..onDragStart.listen(onDragStart)
                    ..onDragEnd.listen(onDragEnd)
            ;
            print("${_el.hashCode} draggable: ${draggable}");

            print("${_el.hashCode} el.dropzones: ${_el.querySelectorAll('[dnd-dropzone]').length}");
            Dropzone dropzones = new Dropzone(_el.querySelectorAll('[dnd-dropzone]'), acceptor: new Acceptor.draggables([draggable]))
                    ..onDragEnter.listen(onDragEnter)
                    ..onDragLeave.listen(onDragLeave)
                    ..onDragOver.listen(onDragOver)
                    ..onDrop.listen(onDrop)
            ;
            print("${_el.hashCode} dropzones: ${dropzones}");
        });
    }

    Element getElement() {
        var _el;
        if (element.shadowRoot != null) {
            _el = element.shadowRoot;
        } else {
            _el = element;
        }

        // common
        print("${_el.hashCode} el: ${_el}");
        print("${_el.hashCode} el.dropzones: ${_el.querySelectorAll('[dnd-dropzone]').length}");
        print("${_el.hashCode} el.draggable: ${_el.querySelectorAll('[dnd-draggable]').length}");
        return _el;
    }

    void onDragEnter(DropzoneEvent event) {
        print("onDragEnter()");
    }

    void onDragStart(DraggableEvent event) {
        print("onDragStart()");
    }

    void onDragEnd(DraggableEvent event) {
        print("onDragEnd()");
    }

    void onDragOver(DropzoneEvent event) {
        print("onDragOver()");
    }

    void onDrop(DropzoneEvent event) {
        print("onDrop()");
    }

    void onDragLeave(DropzoneEvent event) {
        print("onDragLeave()");
    }
}

最佳答案

您需要在某些拖放事件(拖动)上调用preventDefault，以指示您将处理放置事件。

http://www.w3schools.com/html/html5_draganddrop.asp
http://www.html5rocks.com/en/tutorials/dnd/basics/

关于dart - AngularDart应用程序未触发放置事件，但是触发了拖动事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25979363/

dart - AngularDart应用程序未触发放置事件，但是触发了拖动事件

上一篇：dart - 如何使用 Dart 的 LevelDB？

下一篇：dart - DART Editor， “Dead code”语句