Dart 使用core list和core drag drop构建可重定额列表（通过dnd）

我正在尝试构建一个可重用的聚合web组件，它支持通过在核心列表中拖放来重新排序项目。我想要的界面基本上与核心列表相同

<reorderable-list id="list" data="{{data}}" height="60">
  <template>
    <some-reorderable-element>
    </some-reorderable-element>
  </template>
</reorderable-list>

不确定这是否朝着正确的方向发展。问题是

核心列表

只会实例化

a-container

的副本。不知何故，我需要实例化

可拖动成员

的副本，以及用户为每行提供的内容，但不确定如何最好地做到这一点，或者这是否是一种好方法

编辑

好吧，在我把头发拔了几个小时后，我想我已经找到了答案，就像按程序做一样

@CustomTag('reorderable-list')
class ReorderableList extends PolymerElement with Observable {
  @published ObservableList data;
  @published double height;


  ReorderableList.created() : super.created() {
  }

  attached() {
    final CoreList coreList = new Element.tag('core-list-dart');
    coreList.data = data;
    coreList.height = height;

    final TemplateElement template = new Element.tag('template');

    final MemberContainer mc = new Element.tag('member-container');
    final ReorderableMember rm = new Element.tag('reorderable-member');
    rm.children.addAll(children);
    mc.append(rm);
    template.content.append(mc);
    coreList.append(template);

    shadowRoot.append(coreList);
  }
}

这几乎给了我我想要的，但不完全是因为我没有把东西放在阴影中。回到绘图板：-(

编辑2 我以为我已经搞定了，但现在看来ContentElement的行为方式很神秘。 当行项目使用

时，当您将组件从其通常的父组件分离并将其添加到头像时，此内容将消失。可能ContentElement是动态工作的，无法再找到关联的内容。我必须更好地了解其工作原理，看看是否可以绕过它

<link rel="import" href="../../../../packages/core_elements/core_style.html">
<link rel="import" href="../../../../packages/core_elements/core_drag_drop.html">

<core-style id="draggable-list-item" unresolved>
  #row-container, #drag-container {
    padding: none;
    margin: none;
    display: block;
  }

  #row-container {
    border: solid 1px black;
  }
}

</core-style>

<polymer-element name="draggable-list-item" on-drag-start="{{startDrag}}">
  <template>

    <core-style ref="draggable-list-item"></core-style>
    <core-drag-drop></core-drag-drop>

    <div id="row-container">
      <drag-container id="drag-container">
        <content></content>
      </drag-container>
    </div>

  </template>
  <script type="application/dart" src="draggable_list_item.dart"></script>
</polymer-element>


<polymer-element name="drag-container" draggable="true">
  <template>
    <style>
      #foo {
        border: solid 1px blue;
        height: 100%;
        width: 100%;
      }
    </style>

    <div id="foo">
      <p>Hola</p>
      <content></content>
    </div>
  </template>
</polymer-element>

--

---

到目前为止，我尝试将

包装起来（没有拖放）

import'包装：polymer/polymer.dart'；
导入“package:core_elements/core_list_dart.dart”；
@CustomTag（'reorderable-list'）
类ReorderableList扩展了聚合关系{
///用于创建ReorderableList实例的构造函数。
ReorderableList.created（）：super.created（）；
@PublishedProperty（反映：true）
列出数据；
附（{
super.attached（）；
var-template=querySelector（'template'）；
var coreList=（shadowRoot.querySelector（'core-list-dart'）作为coreList）；
coreList.append（模板）；
}
}

用法（与

基本相同）

可重排序列表
{{name}}

import'包装：polymer/polymer.dart'；
类项目{
字符串名；
项目（此名称）；
bool selected=false；
字符串toString（）=>名称；
}
@CustomTag（'app-element'）
类AppElement扩展了聚合关系{
@可观察
列表字符串=toObservable（[new Item（'Anton'）、new Item（'Berta'）、new Item（'Caesar'）、new Item（'Dora'）]）；
AppElement.created（）：super.created（）；
}

---

我认为当

实现拖放事件处理程序时，它应该可以工作。

我已经将所有这些代码添加到了中。每个人都可以自由使用这些代码

我现在离得很近了。它在工作，我可以移动行

最后一个障碍是，在拖动过程中，我丢失了头像中的部分行内容。我很确定这是我的最后一个技巧造成的

元素现在定义为

<polymer-element name="draggable-list-item" on-drag-start="{{startDrag}}">
  <template>

    <core-style ref="draggable-list-item"></core-style>
    <core-drag-drop></core-drag-drop>

    <div id="row-container">
      <div id="drag-container">
        <content></content>
      </div>
    </div>

  </template>
  <script type="application/dart" src="draggable_list_item.dart"></script>
</polymer-element>

我必须获取并克隆内容的分布式节点。这很好，只是我怀疑这也是我拖动时丢失部分行的原因

通常，行渲染为

hello I'm a row data item null with value 2

值为2的

数据项null部分来自我正在使用的数据类的toString

拖动时，该零件将消失，显示的所有内容都将消失

hello I'm a row

沿着线路的某个地方，那个部分消失了，我不知道如何修复它

不幸的是，这只适用于dartium。在chrome中，当你拖动化身时，它似乎只停留在左上角，从不移动。我怀疑这可能只是一个大的核心拖放镖。
我没有仔细看你想做什么，但你的问题/答案错过了
super.attached（）
这是实际插入DOM所必需的。您的代码不清楚您是在使用
核心列表dart
还是
可重排序列表
。在
代码片段中，
的内容应该来自哪里。您希望如何使用元素。
中的内容应该是
的帐篷。其思想是，您可以像使用
核心列表一样使用
重新排序列表
，其行为与使用
核心列表
相同，只是您可以拖动行来重新排序。复杂的是，我试图实际上扩展传递到
核心列表省道
的模板树at template为每一行数据创建一个重复的模板。我想用
成员容器
等包装用户传入的行元素，以便我可以在拖动功能中分层。是的。您的解决方案介于我开始和尝试结束之间。我开始直接使用
核心列表
，然后构建将所有的dnd放入我自己的row元素中。这有点奏效，但为了消除上一个小故障，我意识到使用更通用的东西更容易。因此我尝试构建一个drop-in替换
核心列表
，但正如您的回答所指出的，我最好只是为行创建一个可拖动的包装器。事实上我想我根本不需要
可重排序列表
。我应该可以用一个普通的
核心列表
。明天试试。我想
可重排序列表
是一个监听和处理dnd事件的地方，但是当你的包装器是一个聚合元素时，你基本上有相同的功能。我想你需要一个参考ce从包装器中添加到
核心列表dart
，以便能够添加/删除项目。顺便说一句，我取消了此答案，因为我确信此解决方案在拖动过程中会遇到相同的问题。也就是说，需要使用
content.getDistributedNodes（）
<core-list-dart height="100" data="{{data}}">
  <template>
    <draggable-list-item>
      <test-row></test-row>
    </draggable-list-item>
  </template>
</core-list-dart>

<polymer-element name="draggable-list-item" on-drag-start="{{startDrag}}">
  <template>

    <core-style ref="draggable-list-item"></core-style>
    <core-drag-drop></core-drag-drop>

    <div id="row-container">
      <div id="drag-container">
        <content></content>
      </div>
    </div>

  </template>
  <script type="application/dart" src="draggable_list_item.dart"></script>
</polymer-element>

<core-list-dart height="100" data="{{data}}">
  <template>
    <draggable-list-item>
      <test-row data="{{self}}"></test-row>
    </draggable-list-item>
  </template>
</core-list-dart>

<polymer-element name="test-row"  unresolved>
  <template>
    <h1>hello I'm a row {{data}}</h1>
  </template>
</polymer-element>

<div id="row-container">
  <div id="drag-container">
    <content></content>
  </div>
</div>

final dragContainer = $['drag-container'];

final ContentElement content = dragContainer.querySelector('content');
print(content.getDistributedNodes());
final dragDiv = new Element.tag('div');
final clonedNodes = content.getDistributedNodes().map((n) =>
    n.clone(true));
clonedNodes.forEach((n) {
  dragDiv.append(n);
});

dragDiv.style.width = '${rect.width}px';
dragDiv.style.height = '${rect.height}px';
dragDiv.style.border = "solid blue 1px";

avatar.append(dragDiv);
dragContainer.style.display = 'none';

hello I'm a row data item null with value 2

hello I'm a row