2
我的第一篇文章是關於SO！Drop事件並非在AngularDart應用程序中觸發，而是拖動事件正在觸發
總之，我正在研究Dart drag &拖放庫，以用於AngularDart項目。我創建了一個示例回購（https://bitbucket.org/johnryanancoa/componentdecorator/src/）。該標籤產生期望的標記，裝飾者在其上附加相關事件。事件觸發時，Drag事件正確地將消息打印到控制檯。但是，Drop事件不會觸發。
任何人都可以對此有所瞭解嗎？我認爲我在使用期貨時犯了錯誤，儘管會感謝任何指示。
預先感謝您。約翰
UPDATE：從上面的回購將相關代碼段爲每@斯勞森的建議
== == 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()");
}
}
這將有助於發佈相關的代碼與您的問題。 – skrrgwasme 2014-09-22 17:07:28