ember.js 在ember拖动排序中标识targetList

0s7z1bwu  于 2022-11-05  发布在  其他
关注(0)|答案(2)|浏览(108)

我目前正在尝试在Ember.js应用程序中实现一个ember-drag-sort嵌套列表。
是否有办法在dragEnd操作中确定项目被放到哪个“子列表”中?(例如,类名、id等)
在我的场景中,我正在对可以属于彼此的ember数据记录进行排序(即嵌套的“树”结构)。当我将一个嵌套的记录“拖到”另一个记录中(使被拖的记录成为第二个记录的子记录)时,我需要更新ember-data中的父属性。我的问题是,如何将第二个记录(新的父记录)的一些id传递给dragEnd操作?
这可能吗?
编辑:
换句话说,我希望能够识别我把项目放到了哪个列表中。

ahy6op9u

ahy6op9u1#

targetList为组件拖动侧得数组,要将父级推到子级旁边得目标列表中,可以看一下这个twiddle。

lyfkaqu1

lyfkaqu12#

为了简化列表的标识,@rwwagner90(SOGitHub)实现了附加参数特性。
你可以在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();
}

相关问题