在 ember-drag-sort 中识别 targetList答案

【问题标题】：Identifying targetList in ember-drag-sort在 ember-drag-sort 中识别 targetList
【发布时间】：2017-11-13 05:28:32
【问题描述】：

我目前正在尝试在我的 Ember.js 应用中实现 ember-drag-sort 嵌套列表。

有没有办法在 dragEnd 动作中确定该项目已放入哪个“子列表”？（例如类名、id 等）

在我的场景中，我正在对可以属于彼此的 ember 数据记录进行排序（即嵌套的“树”结构）。当我将一个嵌套记录“拖入”另一个（使拖动的记录成为第二个记录的子记录）时，我需要更新 ember-data.xml 中的父属性。我的问题是，如何将第二条记录（新父项）的一些 id 传递给 dragEnd 操作？

这可能吗？

编辑：

换句话说，我希望能够识别我已将项目放入哪个列表。

【问题讨论】：

是否要将被拖动记录的父级移动到与原始记录并列的目标列表中？
感谢您的回复。抱歉，我已经澄清了我原来的帖子。

标签： ember.js drag-and-drop ember-drag-sort

【解决方案1】：

targetList 指的是组件拖动侧的数组。要将父级与子级一起推送到目标列表，您可以查看此twiddle。

【讨论】：

【解决方案2】：

为了简化列表的识别，@rwwagner90（SO、GitHub）实现了additional arguments 功能。

您可以将某种列表标识符传递给列表的additionalArgs 参数。在此示例中，我传递了拥有列表的 parent 记录：

{{#each parents as |parent|}}
  {{#drag-sort-list
    items          = parent.children
    additionalArgs = (hash parent=parent)
    dragEndAction  = (action 'dragEnd')
    as |child|
  }}
    {{child.name}}
  {{/drag-sort-list}}
{{/each}}

在dragEnd 操作中，您可以访问拥有源列表和目标列表的父记录：

dragEndAction({ sourceList, sourceIndex, sourceArgs, targetList, targetIndex, targetArgs }) {
  if (sourceModel === targetModel && sourceIndex === targetIndex) return;

  const item = sourceList.objectAt(sourceIndex);
  sourceList.removeAt(sourceIndex);
  targetList.insertAt(targetIndex, item);

  // Access the parent via `sourceArgs` and `targetArgs`
  sourceArgs.parent.save();
  targetArgs.parent.save();
}

【讨论】：