NG2-ДНА.Как получить мои DropZones, которые находятся под объектами, чтобы быть активными при перетаскивании. - PullRequest
Новая
       21

NG2-ДНА.Как получить мои DropZones, которые находятся под объектами, чтобы быть активными при перетаскивании.

0 голосов
/ 13 июня 2018

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

Я пытался расположить зоны перетаскивания поверхобъекты и добавлены в класс css (.not-display), чтобы установить display на none, пока ничего не перетаскивается, но мне показалось, что он по-прежнему мешает перетаскивать объект.Я могу щелкнуть по краю объекта и по-прежнему перетаскивать его, но в любом месте, где была зона перетаскивания, он не мог ее подхватить.

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

Я попытался изменить z-index, чтобы изменить порядок слоев, но даже если они, кажется, идут, он по-прежнему мешает перетаскиванию работать должным образом.

Это HTML-код для создания моих перетаскиваемых объектов: 

<div *ngFor="let device of moves[sliderValue].devices"
   class="device-style"
   [ngStyle]="{'background-color':device.colour}"
   [style.width.px]="device.width * mapScale"
   [style.height.px]="device.height * mapScale"
   [style.left.px]="(device.locationX - (device.width/2)) * mapScale + offsetX"
   [style.top.px]="(device.locationY - (device.height/2)) * mapScale + offsetY"
   [style.transform]="'rotate(' + adjustDeviceRotation(device.deviceAngle) + 'deg)'"
   style="position: absolute; left: 0; top: 0;"
   dnd-draggable
   [dragEnabled]="true"
   [dragData]="device"
   (onDragStart)="onDragStart($event, device)"
   (onDragEnd)="onDropFailure($event)">

   <div class="panel-body">
  <div [style.font-size.px]="70 * mapScale"
       [style.width.px]="device.width * mapScale"
       style="text-align: center;">{{device.ident}}</div>
</div>

И вот как я создаю свои зоны перетаскивания: 

  <div *ngFor="let location of locations"
   class="drop-zone-locations"
   [style.left.px]="(location.locationX) * mapScale + offsetX - (100 * mapScale)"
   [style.top.px]="(location.locationY) * mapScale + offsetY - (100 * mapScale)"
   [style.border-radius.px]="(100 * mapScale)"
   [style.width.px]="200 * mapScale"
   [style.height.px]="200 * mapScale"
   [style.pointer-events]="pointerEventStatus"
   style="position: absolute; left: 0; top: 0;"
   [class.not-displayed]="dragging == false"
   dnd-droppable
   (onDragEnter)="onDragEnter($event)"
   (onDropSuccess)="onDropSuccess($event, location)">

Я пытался исследовать это, но, похоже, документации по ng-2 dnd немного, и все, что я пытался, не сработало, поэтому любая помощь будет принята с благодарностью!Спасибо:)

...