如何使聚合物元素可拖动答案

【问题标题】：How to make a polymer element draggable如何使聚合物元素可拖动
【发布时间】：2013-11-05 22:18:01
【问题描述】：

我正在尝试在自定义聚合物元素上启用 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();
}

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>

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

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

编辑：这里有一个Bug Report。

【问题讨论】：

edu.makery.ch/projects/dart-html5-drag-and-drop
作为 don olmstead describes here 这在 Polymer.js 中正常工作：jsbin.com/ejihim/1/edit

标签： dart polymer dart-polymer

【解决方案1】：

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

【讨论】：

感谢您的提示。我只是希望他们能修复阻止影子 dom 节点通过拖放正常工作的错误：请参阅this chromium bug。我真的很想用 Dart 进行聚合物拖放！
这也是过时的，奇怪的是技术变化的速度……核心前缀元素不适用于 Polymer 1.0 或 2.0。参考sortablejs，支持基于聚合物的拖放。

【解决方案2】：

对于聚合物 1.0/2.0

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

如果可能的话，我正在寻找 Dart 中的解决方案。

【解决方案4】：

Polymer Gesture Events 可用于制作聚合物组件可拖动。

继承 Polymer.GestureEventListeners
添加轨道事件监听器：

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

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

【讨论】：