Угловое перетаскивание JS

angularjs drag-and-drop

486 просмотра

1 ответ

Я хочу иметь функцию перетаскивания в следующей структуре. введите описание изображения здесь

Я использую эту библиотеку, чтобы сделать вышеупомянутую структуру перетаскиваемой. Но для этого есть определенные условия.

  • Главный родитель не перетаскивается.
  • Главный родитель может иметь любое количество детей.
  • Дети могут иметь любое количество предметов.

Давайте возьмем ребенка 4.1. Скажем, Item1 имеет тип admin, а Item2 и Item3 являются пользователями типа. Ребенок может иметь только одного администратора, но может иметь любое число или пользователей .

Далее условие для дочерних элементов.

  • Ребенок 4 имеет ребенка 4.1, но ребенок 4.1 не может иметь внутреннего ребенка 4.1.1.
  • Ребенок может двигаться только до уровня 3.
  • Ребенка можно перетащить с уровня 3 на уровень 2 и наоборот.

В этом случае ребенок 3 можно перетащить на ребенка 4.2, а ребенка 4.1 - на нового ребенка 5 или уровня 3 с именем ребенок 3.1.

Я пытаюсь интегрировать вложенные и введите перетаскивание для достижения этой структуры.

РЕДАКТИРОВАТЬ 1

Скрипт того, чего я достиг до сих пор.

Здесь проверка типов выполняется между «мужчинами» и «женщинами» . В каждом контейнере может быть только 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>
Автор: Sallu Salman Источник Размещён: 08.11.2019 11:11

Ответы (1)


1 плюс

Решение

Использовал слушателей обратного вызова для удовлетворения моих потребностей.

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)"
Автор: Sallu Salman Размещён: 13.01.2017 02:29
Вопросы из категории :
32x32