Как сделать полимерный элемент перетаскиваемым
Я пытаюсь включить перетаскивание 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. Это тоже не сработало.
Есть идеи, как сделать полимерный элемент перетаскиваемым?
4 ответа
Я знаю, что это довольно устарело, но я оставляю это здесь для тех, кто может искать. В Polymer теперь есть основной элемент для поддержки перетаскивания: https://github.com/Polymer/core-drag-drop. Существует файл demo.html, чтобы показать вам, как его использовать.
Для Полимера 1.0/2.0
Большинство ответов здесь пытаются ответить на OP для Polymer v0.5 [устарело]. Основные префиксные элементы не будут работать для Polymer 1.0 или 2.0.
Обратитесь к sortablejs, который поддерживает перетаскивание на основе полимеров.
Чтобы сделать мои полимерные элементы перетаскиваемыми, я использовал библиотеку JS Draggabilly, в моем случае полимерные компоненты были также в виде сетки, поэтому я использовал ее в сочетании с Packery
Полимерные события жестов могут использоваться, чтобы сделать полимерный компонент перетаскиваемым.
- Inherit Polymer.GestureEventListeners
- Добавить трекер событий слушателя:
<div id="dragme" on-track="handleTrack"></div>
Подробный образец уже предоставлен на странице событий Polymer Gesture.