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.

回答1:

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.

回答2:

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.

回答3:

to make my Polymer elements draggable I used the JS library Draggabilly, in my case the polymer components were also in a grid, so i used it in combination with Packery

回答4:

Polymer Gesture Events can be used to make a polymer component draggable.

Inherit Polymer.GestureEventListeners
Add track event listener:

<div id="dragme" on-track="handleTrack"></div>

A detailed sample is already provided on Polymer Gesture Events page.

来源：https://stackoverflow.com/questions/19800171/how-to-make-a-polymer-element-draggable

标签

dart

polymer

dart-polymer