角度js拖放

我想在以下结构中拖放功能。角度js拖放

我使用this库来使上述结构可拖动。但它有一定的条件可循。

主父不可拖动。
主要家长可以有任意数量的孩子。
孩子可以有任何数量的项目。

让我们带孩子4.1。说Item1是admin类型，Item2和Item3是类型用户。 孩子只能有一个管理员，但可以有任何号码或用户。

接下来是子元素的条件。

孩子4有孩子4.1，但孩子4.1不能有孩子4.1.1。
孩子只能移动到第3级。
孩子可以从第3级拖到第2级，反之亦然。

在这种情况下，可以将Child 3拖动到Child 4.2，并将Child 4.1拖到新的Child 5或3级子级Child 3.1。

我试图集成nested和type拖放来实现这种结构。

编辑1

的是我迄今取得Fiddle。

这里的类型检查是在'男人'和'女人'之间完成的。每个容器只能有3男2女。现在我想使列表/儿童拖动和其他列表/子里面要下降，这些孩子将不能拖

<script type="text/ng-template" id="types.html"> 
     <ul dnd-list="list.people" 
     dnd-allowed-types="list.allowedTypes" 
     dnd-dragover="dragoverCallback(index,type,list,((list.people | filter:{type: 'men'}).length >= list.maxM),((list.people | filter: {type: 'woman'}).length >= list.maxW))" 
     dnd-drop="dropCallback(index, item, type)" 
     dnd-disable-if="(list.people.length >= (list.maxM+list.maxW))"> 

      <li ng-repeat="person in list.people" 
      dnd-draggable="person" 
      dnd-type="person.type" 
      dnd-moved="list.people.splice($index, 1)" 
      dnd-effect-allowed="move" class="background-{{person.type}}"> 
      <dnd-nodrag> 
       <div dnd-handle class="handle">:::</div> 
       <div class="name"> 
       <input type="text" ng-model="person.name" class="background-{{person.type}} form-control input-sm"> 
       </div> 
      </dnd-nodrag> 
      </li> 
      <li class="dndPlaceholder"> 
      Drop any <strong>{{list.allowedTypes.join(' or ')}}</strong> here 
      </li> 
     </ul> 
     </script> 

    <div class="typesDemo"> 

    <div ng-repeat="list in lists" class="col-md-4"> 
     <div class="panel panel-info"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">List of {{list.label}} (max. {{list.max}})</h3> 
     </div> 
     <div class="panel-body" ng-include="'types.html'"></div> 
     </div> 
    </div> 

    </div>

来源

2016-08-20 Sallu Salman

请问您可以发布您的解决方案吗？ –

@ZiaUlRehmanMughal它是一个非常长的代码。我添加了许多条件来满足我的需求。库有回调监听器。 dragStartCallBack，dragoverCallback，dropCallback，insertedCallback。我在这些回调中写下了自己的条件。返回false将不会在模型中发生任何变化。 –

你可以通过html调用这些回调函数。（事件，列表，项目，索引）“，dnd-drop =”dropCallback（event，list，item，index）“，dnd-dragover =”dragoverCallback “，dnd-dragstart =”dragStartCallBack（list，item，$ index）“ –

使用的回调监听器，以满足我的需要一个主父里面。

dnd-dragstart="dragStartCallBack(list,item,$index)" 
dnd-dragover="dragoverCallback(event,list,type,index)" 
dnd-drop="dropCallback(event,list,item,index)" 
dnd-inserted="insertedCallback(event,list,item,index)"

来源

2017-01-13 14:29:04

并且请标记为答案:) –

角度js拖放

回答

相关问题