使用核心列表和核心拖放构建可重排序列表(通过dnd)

Question

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

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

我目前的想法是，我希望按以下方式包装每一行

<a-container>
    <draggable-member>
       <some-reorderable-element>
       </some-reorderable-element>
    </draggable-member>
</a-container>

在这里，a-container始终保持在适当的位置，大小与一行大小完全相同，draggable-member从a-container拖离并附加到core-drag-drop化身。当a-container保持在适当的位置时，这一行就会保持我所希望的背景色。

我挣扎的部分是如何为每一行实例化上面的结构。

我沿着一条路走，就像

<core-list-dart id="list" data="{{data}}" height="{{height}}">
  <template>
    <a-container>
      <draggable-member id="member" draggable="true">
        <content></content>
      </draggable-member>
    </a-container>
  </template>
</core-list-dart>

不确定这是否朝着正确的方向发展。core-list只会实例化a-container的副本。不知何故，我需要实例化draggable-member的副本，用户也为每一行提供了内容，但不确定如何最好地这样做，或者这是否是一种好方法。

编辑

嗯，把头发拔了几个小时后，我想我已经有了答案，用程序来做，就像

@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);
  }
}

这几乎给了我我想要的，但不完全是因为我没有把事情放在阴影中。回到画板:-(

Edit2

我以为我已经搞定了，但现在看来，ContentElement的行为是神秘的。当行项使用<content></content>时，当您将组件与其通常的父级分离并将其添加到化身时，此内容将消失。据推测，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>

--

library ui.polymer.core.list.item.draggable;

import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:logging/logging.dart';
import 'dart:js';

Logger _log = new Logger('ui.polymer.core.item.draggable');


@CustomTag('draggable-list-item')
class DraggableListItem extends PolymerElement with Observable {
  bool multi;

  DraggableListItem.created() : super.created() {
    _log.finer('DraggableListItem.created');
  }
  void startDrag(CustomEvent e, JsObject dragInfo) {
    _log.finest('DraggableListItem dragging ${identityHashCode(e)} '
      '${e.target}, ${e.currentTarget}, ${e.detail}, ${dragInfo}');
    _log.finest('e.target == e.currentTarget => ${identical(e.target, e.currentTarget)}');
    final HtmlElement avatar = dragInfo['avatar'];

    final rect = getBoundingClientRect();

    avatar.style.setProperty('width', '${rect.width}px');
    avatar.style.setProperty('height', '${rect.height}px');

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

    final rowContainer = $['row-container'];

    rowContainer.style.setProperty('width', '${rect.width}px');
    rowContainer.style.setProperty('height', '${rect.height}px');

    dragContainer.style.setProperty('width', '${rect.width}px');
    dragContainer.style.setProperty('height', '${rect.height}px');

    avatar.append(dragContainer.clone(true));
    dragContainer.style.display = 'none';
    dragInfo['drag'] = drag;
    dragInfo['drop'] = drop;
  }

  drag(JsObject dragInfo) {
    print('drag');
    final HtmlElement avatar = dragInfo['avatar'];
    print(avatar);
  }
  drop(JsObject dragInfo) {
    print('drop');
    final HtmlElement avatar = dragInfo['avatar'];
    print(avatar);
  }
}


@CustomTag('drag-container')
class DragContainer extends PolymerElement with Observable {
  bool multi;

  DragContainer.created() : super.created() {
    _log.finer('DragContainer.created');
    print('DragContainer.created');
  }
}

--

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

Answer 1

到目前为止，我尝试将<core-list-dart>包装起来(没有拖放)。

import 'package:polymer/polymer.dart';
import 'package:core_elements/core_list_dart.dart';

@CustomTag('reorderable-list')

class ReorderableList extends PolymerElement {

  /// Constructor used to create instance of ReorderableList.
  ReorderableList.created() : super.created();

  @PublishedProperty(reflect: true)
  List<String> data;

  attached() {
    super.attached();
    var template = querySelector('template');
    var coreList = (shadowRoot.querySelector('core-list-dart') as CoreList);
    coreList.append(template);
  }
}

<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/core_elements/core_list_dart.html">

<polymer-element name="reorderable-list">
  <template>
    <core-list-dart data="{{data}}"></core-list-dart>
    <content></content>
  </template>
  <script type="application/dart" src="reorderable_list.dart"></script>
</polymer-element>

用法(基本上与<core-list-dart>相同)

<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/core_elements/core_list_dart.html">
<link rel="import" href="drag_container.html">
<link rel="import" href="draggable_member.html">
<link rel="import" href="test_element.html">
<link rel="import" href="reorderable_list.html">

<polymer-element name="app-element">
  <template>
    reorderable-list
    <reorderable-list data="{{strings}}">
      <template id="app-element-reorderable">
        <drag-container>
          <draggable-member id="member" draggable="true">
            <test-element>{{name}}</test-element>
          </draggable-member>
        </drag-container>
      </template>
    </reorderable-list>

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

import 'package:polymer/polymer.dart';

class Item {
  String name;
  Item(this.name);
  bool selected = false;

  String toString() => name;
}

@CustomTag('app-element')

class AppElement extends PolymerElement {

  @observable
  List strings = toObservable([new Item('Anton'), new Item('Berta'), new Item('Caesar'), new Item('Dora')]);

  AppElement.created() : super.created();
}

我认为当<reorderable-list>实现拖放事件处理程序时，它应该能工作。

Answer 2

我将所有这些代码添加到stuff中。每个人都可以自由地利用这一点。

我现在离得很近。它起作用了，因为我可以移动行。

最后一个障碍是，在拖动过程中，我丢失了化身中的部分行内容。我很确定这是我最后的把戏。

元素现在被定义为

<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>

因此，测试行(<test-row data="{{self}}"></test-row>)是在

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

正如我前面提到的，ContentElement的行为方式很神秘。为了使它正确地呈现，我执行了以下操作

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

data item null with value 2部分来自我正在使用的数据类的toString。

拖动时，该部分消失，所显示的只有

hello I'm a row

沿着这条线，这个部分消失了，我不知道如何修复它

遗憾的是，这只在dartium起作用。在铬，当你拖动，阿凡达似乎只是停留在左上角，永远不会移动。我怀疑这可能只是一个大的core_drag_drop在飞镖。