在AngularDart应用程序中不会触发拖放事件,但拖动事件正在触发

时间:2014-09-22 17:00:20

标签: dart angular-dart

我在SO上的第一篇文章!

简而言之,我正在研究Dart drag& amp;删除用于AngularDart项目的库。我创建了一个示例仓库(https://bitbucket.org/johnryanancoa/componentdecorator/src/)。标签生成所需的标记,装饰者将相关事件附加到该标记上。事件触发时,Drag事件正确地将消息打印到控制台。但是,Drop事件没有触发。

有人可以对此有所了解吗?我想我在使用Futures时犯了错误,尽管我会很感激任何指针。

提前谢谢你。约翰

更新:根据@ slawson的建议,从上面的repo中添加相关的代码片段

== 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()");
    }
}

2 个答案:

答案 0 :(得分:1)

你需要在一些拖放事件(dragover)上调用preventDefault来表示你将处理掉落事件。

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

答案 1 :(得分:0)

UPDATE !!修改@Component声明似乎可以解决问题...

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

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

我需要明天进一步调查,但至少会触发事件并打印到控制台!谢谢你的帮助......