AngularJS:拖动列表项并填充另一个列表项

时间:2018-06-06 13:06:57

标签: angularjs drag-and-drop

我正在使用this库在列表之间拖放项目。拖动列表项工作正常。现在我正在寻找一种方法来填充基础数据。  因此,拖动的列表项必须对目标列表项有影响,并且不会在目标列表中显示为额外项。这是我的第二个来源清单:

  <ul class="defaults" dnd-list="defaults.defaults" dnd-allowed-types="defaults.allowedtypes">
    <li class = "defaults"  ng-repeat="default in defaults.defaults"
    dnd-draggable="default"
   dnd-effect-allowed="move"
   dnd-selected="models.selected = default"
   dnd-type="default.type"
   dnd-disable-if="default.type == 'unknown'">
        <dng-nodrag draggable="true"><div dnd-handle="" class="handle" draggable="true">::: {{default.title}}</div></dng-nodrag>
    </li>
  </ul>

这是我的目标:

<ul class="allactions" dnd-list="flow.actions" dnd-allowed-types="flow.allowedtypes">
  <input type="text" name="Flow Title" placeholder="Add flow title here" value="" ng-model="flowtitle.title" >
  <a href="{{saveflow()}}" download="{{GetFileName(flowtitle.title)}}" class="saveflow" >Save flow to json</a>
  <li class = "allactions" ng-repeat="action in flow.actions" dnd-draggable="action" dnd-effect-allowed="move" dnd-moved="flow.actions.splice($index, 1)" dnd-selected="models.selected = action">
  <dng-nodrag draggable="true">
    <div dnd-handle="" class="handle" draggable="true">:::
      <button class="remove" ng-click="removeActionFromFlow(action)"> x </button>
      <ng-include src="action.actiontemplate"></ng-include>
    </div></dng-nodrag>
  </li>
</ul>

其中一个模板如下:

<div class="content">
<div class="actiontitle">Create site</div>
<div data-tip="Enter the parent url here">
  <input dnd-allowed-types="['url']"
  type="text" 
  title=""="Parent url" placeholder="Parent url" ng-model="action.parentUrl.generic"/>
</div>
<input type="text" placeholder="SubSite Url" ng-model="action.SubSiteUrl"/>
<input type="text" placeholder="Title" ng-model="action.Title"/>
<input type="text" placeholder="Template" ng-model="action.Template"/>
</div>

我想要实现的是,不是添加新的列表项,而是填充链接到目标列表项的对象的action.ParentUrl属性,并将其链接到当前拖动的项目。这些源项目将具有“URL”类型。

有人可以给我一个如何继续执行此任务的提示吗?

0 个答案:

没有答案