drag-and-drop - 如何在 Dart 中使用 core-drag-drop 使聚合物元素可拖动？

标签 drag-and-drop dart dart-polymer dart-html core-elements

我正在尝试使 Polymer 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 音乐应用程序，您可以将歌曲拖放到播放队列中的不同位置。有人可以帮我吗？

更新(澄清) 我想要制作一个可拖动的聚合物 Dart 元素。 demo.html 用于拖动

元素。我可以在 Dart 中通过拖放操作来处理
。

最佳答案

关于drag-and-drop - 如何在 Dart 中使用 core-drag-drop 使聚合物元素可拖动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25229089/

上一篇：gradle - 包括具有相同插件依赖项的第 3 方子项目

下一篇：dart - AngularDart 中的表单验证/字段验证失败且没有错误消息

©2024 IT工具网  联系我们