Html Drag and Drop - 将浮动拖动的项目定位到光标答案

【问题标题】：Html Drag and Drop - Position floating dragged item to cursorHtml Drag and Drop - 将浮动拖动的项目定位到光标
【发布时间】：2020-05-05 03:39:06
【问题描述】：

我正在使用 Angular 8+ 并使用 HTML 拖放功能。简而言之，当我拖动一个可拖动的 div 时，我希望鼠标光标始终位于被拖动的浮动 div 的左上角，无论我在 div 中拖动到哪里。下面是我希望光标所在位置的屏幕截图。

这可以在 Angular/Javascript 中实现吗？我在下面有 stackblitz 链接： https://stackblitz.com/edit/angular-envxg7?file=src/app/app.component.html

在此先感谢

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

【问题讨论】：

嗨！这在角度上是可能的，但它有点混乱（意见....），长话短说：在普通的 JS/Jquery 中，您可以使用 this 之类的东西来实现这一点，基本上是您克隆一个节点并使其看起来像一个常规的可拖动元素，但您可以根据自己的喜好定位它。在 Angular 中，您基本上使用组件而不是动态 HTML，因此您需要借助 ComponentFactories 动态注入节点（组件）来实现这一点。
除非有更花哨的 hacky 方式来使用plainJS，否则它也可能在 Angular 中“轻松”完成
感谢您的 tils。老实说，我并不完全了解克隆节点解决方案的工作原理，希望我能找到一些信息来解决这个问题

标签： javascript html css angular drag-and-drop

【解决方案1】：

我最终使用了以下角度拖放插件： 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 等。因此您几乎可以将拖动的项目相对于光标放置在几乎任何地方

【讨论】：