How to make a polymer element draggable
I'm trying to enable HTML5 drag and drop on a custom polymer element but it doesn't work. Without polymer it's possible to just add the draggable attribute.
Here is my code in Dart:
my_component.html
<polymer-element name="my-component">
<template>
<style>
@host {
:scope {
display: block;
}
}
div {
background-color: red;
width: 200px;
height: 200px;
}
</style>
<div>
Drag me
</div>
</template>
<script type="application/dart" src="my_component.dart"></script>
</polymer-element>
my_component.dart
import 'package:polymer/polymer.dart';
@CustomTag('my-component')
class MyComponent extends PolymerElement {
MyComponent.created() : super.created();
}
test.html
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="my_component.html">
<script type="application/dart">import 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<my-component draggable="true"></my-component>
</body>
</html>
I also tried extending directly from an HTML Element. This didn't work either.
Any ideas how a polymer element can be made draggable?
Edit: There is a Bug Report for this.
Answer
I know this is fairly dated, but I'm leaving this here for others who might be looking. There is a core element in Polymer now for dragging support: https://github.com/Polymer/core-drag-drop. There is a demo.html file to show you how to use it.