使用核心列表和核心拖放构建可重排列表（通过dnd） [英] building a reorderable list (via dnd) using core-list and core-drag-drop

问题描述

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

 < reorderable-list id =listdata ={ {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 时分离，并附加到核心拖放头像。因为 a-container 仍然存在，这应该保持行与只有我希望的背景颜色。

我正在努力的部分是如何实例化每一行的上述结构。

我沿着

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

不确定这是否方向正确。 Catch是 core-list 只是实例化 a-container 的副本。不知何故，我需要实例化 draggable-member 的副本和用户提供的每一行的内容，但不知道如何做到这一点，或者如果这是一个很好的方法。

编辑

在我把头发拉出几个小时后认为我有这样的答案通过编程方式像

  @CustomTag（'reorderable-list'）
 class ReorderableList extends PolymerElement with Observable {
 @published ObservableList数据; 
 @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）; 
} 
} 
  

这几乎给了我想要的，我不把东西放在阴影dom。回到绘图板： - （

Edit2

我以为我已经钉钉，但现在看来ContentElement以神秘的方式运行
当行项目使用< content>< / content> 时，通常的父类，并将其添加到头像。推测的ContentElement动态工作，不能再找到相关的内容。我必须更好地了解如何工作，看看我是否可以绕过它。

 < link rel =importhref =../../../../ packages / core_elements / core_style.html > 
< link rel =importhref =../../../../ packages / core_elements / core_drag_drop.html> 
 
< core -style id =draggable-list-itemunresolved> 
＃row-container，＃drag-container {
 padding：none; 
 margin：none; 
 display：block ; 
} 
 
＃row-container {
 border：solid 1px black; 
} 
} 
 
<核心风格> 
 
< polymer-element name =draggable-list-itemon-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 / dartsrc =draggable_list_item.dart>< / script> 
< / polymer-element> 
 
 
< polymer-element name =drag-containerdraggable =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> 
  

-

 code> 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 =100data ={{data}}> 
< template> 
< draggable-list-item> 
< test-row>< / test-row> 
< / draggable-list-item> 
< / template> 
< / core-list-dart> 
  

解决方案

c>< core-list-dart> 工作到目前为止（无拖放）。

< pre class =lang-dart prettyprint-override> import'package：polymer / polymer.dart';
import'package：core_elements / core_list_dart.dart';

@CustomTag（'reorderable-list'）

类ReorderableList extends PolymerElement {

///用于创建ReorderableList实例的构造函数。
ReorderableList.created（）：super.created（）;

@PublishedProperty（reflect：true）
List< String>数据;

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


 < link rel =importhref =../../ packages / polymer / polymer.html> 
< link rel =importhref =../../ 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 / dartsrc =reorderable_list.dart>< / script> 
< / polymer-element> 
  

用法（基本上与< core-list-dart> / code>）

 < link rel =importhref =。 ./../packages/polymer/polymer.html 
< link rel =importhref =../../ packages / core_elements / core_list_dart.html> 
< link rel =importhref =drag_container.html> 
< link rel =importhref =draggable_member.html> 
< link rel =importhref =test_element.html> 
< link rel =importhref =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 =memberdraggable =true> 
< test-element> {{name}}< / test-element> 
< / draggable-member> 
< / drag-container> 
< / template> 
< / reorderable-list> 
 
< / template> 
< script type =application / dartsrc =app_element.dart>< / script> 
< / polymer-element> 
  







  import'package：polymer / polymer.dart'; 
 
 class Item {
字符串名称; 
 Item（this.name）; 
 bool selected = false; 
 
 String toString（）=>名称; 
} 
 
 @CustomTag（'app-element'）
 
类AppElement扩展PolymerElement {
 
 @observable 
 strings = toObservable（[new Item（'Anton'），new Item（'Berta'），new Item（'Caesar'），new Item（'Dora'）]）; 
 
 AppElement.created（）：super.created（）; 
} 
  



我认为当< reorderable- list> 实现拖放事件处理程序。

I'm trying to build a reusable polymer web component that supports reordering items via drag and drop in a core-list. The interface I want is essentially the same as core-list

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

My current thinking is that I want each row to be wrapped as follows

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

where a-container always remains in place and is sized exactly the size of a row and draggable-member gets detached on drag from a-container and attached to the core-drag-drop avatar. As a-container remains in place this should keep the row there with just the background colour I'm hoping.

The part I'm struggling with is how to instantiate the above structure for each row.

I was heading down a path like

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

Not sure if this is heading in the right direction. Catch is that core-list is only going to instantiate copies of a-container. Somehow I'd need to instantiate copies of draggable-member and the user provided content for each row too but not sure how best to do that or if this is even a good approach.

Edit

Well after pulling my hair out for a few hours I thought I had the answer by doing it programatically like

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

This almost gives me what I want but not quite as I'm not putting things in the shadow dom. Back to the drawing board :-(

Edit2

I thought I had it nailed but now it seems that the ContentElement behaves in mysterious ways. When the row items are using <content></content> then this content disappears when you detach the component from it's usual parent and add it to the avatar. Presumably the ContentElement works dynamically and can no longer find the associated content. I'll have to get a better understanding of how that works to see if I can get around it.

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

解决方案

I got my attempt to wrap the <core-list-dart> working so far (without drag-n-drop).

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>

usage (basically the same as <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();
}

I think it should work when <reorderable-list> implements the drag-n-drop event handlers.

这篇关于使用核心列表和核心拖放构建可重排列表（通过dnd）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！