如何使聚合物元素可拖动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使聚合物元素可拖动相关的知识，希望对你有一定的参考价值。
我正在尝试在自定义聚合物元素上拖放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为此。
答案
我知道这是相当陈旧的，但我将这里留给其他可能正在寻找的人。现在，Polymer中有一个核心元素用于拖动支持：https://github.com/Polymer/core-drag-drop。有一个demo.html文件向您展示如何使用它。
另一答案
对于Polymer 1.0 / 2.0
这里的大多数答案都是为了回答聚合物v0.5的OP [过时]。核心前缀元素不适用于Polymer 1.0或2.0。
请参阅sortablejs，它支持基于聚合物的拖放。
另一答案
为了使我的Polymer元素可拖动我使用JS库Draggabilly，在我的情况下聚合物组件也在网格中，所以我将它与Packery结合使用
另一答案
Polymer Gesture Events可用于制造可拖动的聚合物组分。
- 继承Polymer.GestureEventListeners
- 添加跟踪事件监听器：
<div id="dragme" on-track="handleTrack"></div>
Polymer Gesture Events页面上已经提供了详细的示例。
以上是关于如何使聚合物元素可拖动的主要内容，如果未能解决你的问题，请参考以下文章