How to use core-drag-drop in Dart to make a Polymer Element Draggable?

Question

I'm trying to make a Polymer Dart element draggable, and swap info with another item in a list. My latest attempt is using <core-drag-drop> element. I'm using the events created by this element of trackstart, track, and trackend. I can get them to fire, but I'm unable to figure out how to get a visual representation of the drag effect, like you can with regular <div> elements by setting their draggable attribute to true. Not only that I can't figure out how I'm supposed to get info out of these JS events. I have managed to get some data from the Dart event, but I'm sure there is some missing data set by the <core-drag-drop> element, (or is there?).

<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>

This works in printing out info, but still leaves me clueless on how I can use this to drag an item over another, highlighting targets as they are dragged over, and then swapping info with the end target. This is in aid of swapping the order of items in a list. A bit like the Google Play Music app, where you can drag a song and drop it in a different position in the play queue. Can someone help me here?

UPDATE (Clarification) I'm wanting to make a Polymer Dart Element draggable. The <core-drag-drop> demo.html is for dragging <div> elements. I can get drag and drop to work on <div> fine in Dart.

Answer 1

Did you have a look at the demo pages?

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

Here they define the drag appearance by assigning HTML to the avatar field of the drag-start event details.