Html Drag and Drop - Поместить перемещаемый перетаскиваемый элемент в курсор - PullRequest
Новая
       11

Html Drag and Drop - Поместить перемещаемый перетаскиваемый элемент в курсор

0 голосов
/ 18 января 2020

Я использую Angular 8+ и работаю с HTML функцией перетаскивания. Короче говоря, когда я перетаскиваю div, который сделал перетаскиваемым, я бы хотел, чтобы курсор мыши всегда был в верхнем левом углу плавающего div, перетаскиваемого независимо от того, куда я перетаскивал внутри div. Ниже приведен снимок экрана, на котором я бы хотел, чтобы курсор находился.

Возможно ли это сделать в Angular / Javascript? У меня есть ссылка на стек: https://stackblitz.com/edit/angular-envxg7?file=src / app / app.component. html

Заранее большое спасибо

screenshot 

<div draggable="true" style="width:300px;height:50px;background-color:red">
 Drag Item
</div>

1 Ответ

0 голосов
/ 19 января 2020

Я использую следующий angular плагин перетаскивания: https://github.com/reppners/ngx-drag-drop

Здесь мы можем фактически установить положение перетаскиваемого элемента относительно курсора, используя функцию dndDragImageOffsetFunction имущество. Для всех, кто интересуется ниже, приведен простой пример, который устанавливает курсор в верхнем левом углу перетаскиваемого элемента независимо от положения, из которого перетаскивается элемент.

HTML

<div style="width:300px;height:50px;background-color:red"
[dndDraggable]="1"      
[dndDragImageOffsetFunction]="dragImageOffsetRight"
dndDragImageRef
>
 Drag Item
</div>

Компонент 

dragImageOffsetRight:DndDragImageOffsetFunction = ( event:DragEvent, dragImage:Element ) => {
    return {
      x: 0,
      y: 0 
    };
  };

Примечание: событие DragEvent предоставит несколько свойств, таких как элемент offsetx y et c. Таким образом, вы можете разместить почти перетаскиваемый элемент относительно курсора почти в любом месте

...