我正在尝试使 Polymer Dart 元素可拖动,并与列表中的另一个项目交换信息。我最近的尝试是使用 <core-drag-drop> 元素。我正在使用由 trackstart、track 和 trackend 元素创建的事件。我可以让它们触发,但我无法弄清楚如何获得拖动效果的视觉表示,就像你可以通过将它们的可拖动属性设置为 true 来使用常规 <div> 元素一样。不仅如此,我不知道我应该如何从这些 JS 事件中获取信息。我已经设法从 Dart 事件中获取了一些数据,但我确信 <core-drag-drop> 元素设置了一些丢失的数据,(或者是否存在?)。
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/core_elements/core_drag_drop.html">
<link rel="import" href="draggable-item.html">
<polymer-element name="item-list">
<template>
<core-drag-drop></core-drag-drop>
<draggable-item id="item1" on-trackstart="{{ dragStart }}" on-track="{{ dragIt }}" on-trackend="{{ dragEnd }}"></draggable-item>
<draggable-item id="item2" on-trackstart="{{ dragStart }}" on-track="{{ dragIt }}" on-trackend="{{ dragEnd }}"></draggable-item>
</template>
<script type="application/dart">
import 'dart:html';
import 'package:polymer/polymer.dart';
@CustomTag('item-list')
class ItemList extends PolymerElement {
ItemList.created() : super.created();
...
dragStart(Event ev) {
print("dragStart: ${ev.currentTarget.id}");
}
dragIt(Event ev) {
print("dragIt: ${ev.path}");
}
dragStop(Event ev) {
print("dragStop $ev, ${ev.target.id}, ${ev.path}");
}
}
</script>
</polymer-element>
这适用于打印信息,但仍然让我不知道如何使用它来将一个项目拖到另一个项目上,在它们被拖过时突出显示目标,然后与最终目标交换信息。这有助于交换列表中项目的顺序。有点像 Google Play 音乐应用程序,您可以在其中将歌曲拖放到播放队列中的不同位置。有人可以在这里帮助我吗?
更新(澄清)我想让聚合物飞镖元素可拖动。<core-drag-drop> demo.html 用于拖动 <div> 元素。我可以在 Dart 中进行拖放以在 <div> 上正常工作。