如何使聚合物元素可拖动

问题描述 投票:10回答:4

我正在尝试在自定义聚合物元素上拖放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为此。

dart polymer dart-polymer
4个回答
3
投票

我知道这是相当陈旧的,但我将这里留给其他可能正在寻找的人。现在,Polymer中有一个核心元素用于拖动支持:https://github.com/Polymer/core-drag-drop。有一个demo.html文件向您展示如何使用它。


2
投票

对于Polymer 1.0 / 2.0

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

请参阅sortablejs,它支持基于聚合物的拖放。


1
投票

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


0
投票

Polymer Gesture Events可用于制造可拖动的聚合物组分。

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.