Menu
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:
<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>
import 'package:polymer/polymer.dart';
@CustomTag('my-component')
class MyComponent extends PolymerElement {
MyComponent.created() : super.created();
}
<!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.
543
To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled: images, files, links, files, or any markup on your page. Our example creates an interface to rearrange columns that have been laid out with CSS Grid.
Add the draggable property with the value of true to an element to make it draggable. The dragstart , drag , and dragend events fire on the draggable element. The dragenter , dragover , dragleave or drop events fire on the drop target.
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.
192
For Polymer 1.0/2.0
Most answers here tackle try to answer the OP for Polymer v0.5 [outdated]. Core prefixed elements will not work for Polymer 1.0 or 2.0.
Refer to sortablejs, which supports polymer based drag and drop.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
