2

Polymer Dart 要素をドラッグ可能にし、情報をリスト内の別のアイテムと交換しようとしています。私の最近の試みは <core-drag-drop> 要素を使用しています。trackstart、track、および trackend のこの要素によって作成されたイベントを使用しています。それらを起動させることはできますが、通常の <div> 要素でドラッグ可能属性を true に設定することでできるように、ドラッグ効果を視覚的に表現する方法を理解できません。それだけでなく、これらの 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 ミュージック アプリに少し似ています。誰かがここで私を助けることができますか?

更新 (明確化) Polymer Dart Element をドラッグ可能にしたいと考えています。<core-drag-drop> demo.html は <div> 要素をドラッグするためのものです。Dart では、ドラッグ アンド ドロップを <div> でうまく動作させることができます。

4

1 に答える 1