如何使聚合物元件可拖动 [英] How to make a polymer element draggable

查看:142
本文介绍了如何使聚合物元件可拖动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我尝试在自定义聚合物元素上启用 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>
拖动我
< / div>
< / template>
< script type =application / dartsrc =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



< pre class =lang-html prettyprint-override> <!DOCTYPE html>

< html>
< head>
< link rel =importhref =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元素扩展。


$ b。

任何想法如何使聚合物元素可拖曳? $ b

编辑:此操作有错误报告

解决方案

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


I'm trying to enable HTML5 drag and drop on a custom polymer element but it doesn't work. Without polymer it's possible to just add the draggable attribute.

Here is my code in 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>

I also tried extending directly from an HTML Element. This didn't work either.

Any ideas how a polymer element can be made draggable?

Edit: There is a Bug Report for this.

解决方案

I know this is fairly dated, but I'm leaving this here for others who might be looking. There is a core element in Polymer now for dragging support: https://github.com/Polymer/core-drag-drop. There is a demo.html file to show you how to use it.

这篇关于如何使聚合物元件可拖动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆