如何在Dart中使用核心拖放使聚合物元素可拖放



我正试图使一个聚合物Dart元素可拖动,并与列表中的另一个项目交换信息。我最近的尝试是使用元素。我使用的是trackstart、track和trackend元素创建的事件。我可以让它们开火,但我不知道如何获得拖动效果的视觉表示,就像你可以使用常规的

元素的draggable属性为true。不仅如此,我不知道我应该如何从这些JS事件中获取信息。我已经设法从Dart事件中获得了一些数据,但我确信有一些丢失的数据集由元素,

<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 Music应用,你可以把一首歌拖拽到播放队列的不同位置。有人能帮我一下吗?

更新(澄清)我想制作一个可拖动的聚合物Dart元素。& lt; core-drag-drop>Demo.html用于拖拽

元素。我可以通过拖放操作来进行div操作;

你看过演示页面了吗?

JS:

https://github.com/Polymer/core-drag-drop/blob/master/demo.html

Dart:

https://github.com/dart-lang/polymer-core-and-paper-examples/blob/master/web/core_drag_drop.html

https://github.com/dart-lang/polymer-core-and-paper-examples/blob/master/web/core_drag_drop.dart

这里他们通过将HTML分配给drag-start事件细节的avatar字段来定义拖动外观。

最新更新