我正在尝试在自定义聚合物元素上拖放HTML5,但它不起作用.没有聚合物,可以只添加draggable属性.
这是我在Dart中的代码:
<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>
Run Code Online (Sandbox Code Playgroud)
import 'package:polymer/polymer.dart';
@CustomTag('my-component')
class MyComponent extends PolymerElement {
MyComponent.created() : super.created();
}
Run Code Online (Sandbox Code Playgroud)
<!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>
Run Code Online (Sandbox Code Playgroud)
我也尝试直接从HTML元素扩展.这也不起作用.
有关聚合物元素如何可拖动的任何想法?
编辑:有一个错误报告.
有没有办法对HTML5拖放的setDragImage进行特征检测(在JavaScript或Dart中)?
我使用以下内容进行常规HTML5拖放功能检测(从指南到检测所有内容):
return 'draggable' in document.createElement('span');
Run Code Online (Sandbox Code Playgroud)
这将返回trueChrome,Firefox等和IE10.它将返回falseIE9.
现在,问题在于IE10:虽然它支持大多数HTML5拖放,但是setDragImage不支持,我需要提供一个polyfill setDragImage.但我无法弄清楚如何检测这一点.
根据Package布局约定,该web文件夹应包含以下内容:
HTML,CSS,图像,甚至可能是一些JavaScript.所有这些都进入了你的包的web目录.您可以自由地将内容组织到您的内心.如果让你开心的话,对子目录发疯吧.
所以我的web目录看起来像这样:
web/data_access
web/model
web/ui
web/ui/navigation
etc.
Run Code Online (Sandbox Code Playgroud)
现在,如何管理所有这些import语句.我得到了很多声明:
import '../../model/my_model.dart';
import '../../data_access/mock_dao.dart';
etc.
Run Code Online (Sandbox Code Playgroud)
我不喜欢../在我的导入中使用那么多,因为这很脆弱,每当我更改文件夹结构中的任何内容时,我都会遇到问题.
有没有更好的方法来组织web文件夹中的代码?
要么
还有其他方法可以进口吗?
我使用Dart Polymer创建Web组件。为了调试CSS样式,我在Dartium中启动了该应用,然后使用Chrome DevTools检查了样式。
问题在于,尽管正确应用了<style>标签中定义的所有样式,<polymer-element>它们都不会出现在DevTools中!在哪里可以找到那些样式?