11

我正在尝试在自定义聚合物元素上启用 HTML5 拖放，但它不起作用。如果没有聚合物，可以只添加draggable属性。

这是我在 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();
}

测试.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>

我还尝试直接从 HTML 元素扩展。这也不起作用。

任何想法如何使聚合物元素可拖动？

编辑：有一个错误报告。

4

4 回答 4

3

我知道这已经过时了，但我将把它留给其他可能正在寻找的人。Polymer 现在有一个用于拖动支持的核心元素：https ://github.com/Polymer/core-drag-drop 。有一个 demo.html 文件向您展示如何使用它。

于 2014-05-31T03:01:57.327 回答
2

对于聚合物 1.0/2.0

这里的大多数答案都试图回答 Polymer v0.5 [过时]的 OP。核心前缀元素不适用于 Polymer 1.0 或 2.0。

参考sortablejs，它支持基于聚合物的拖放。

于 2016-10-28T15:15:48.873 回答
1

为了使我的 Polymer 元素可拖动，我使用了 JS 库Draggabilly，在我的情况下，聚合物组件也在网格中，所以我将它与Packery结合使用

于 2013-11-12T13:54:03.133 回答
0

聚合物手势事件可用于使聚合物组件可拖动。

  1. 继承 Polymer.GestureEventListeners
  2. 添加跟踪事件监听器：

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

Polymer Gesture Events页面上已经提供了详细的示例。

于 2017-12-20T10:35:44.637 回答