拖动时退出禁止光标

Question

https://imgur.com/Ek3CAOt

我想在拖动元素时退出禁止光标。我使用 html5 默认拖放。我正在使用打字稿

我尝试从 ev.target.style.cursor 更改为“grab”光标，我尝试从 dropEffect 更改等等，但它们都没有产生期望的效果。这是拖拽代码。

<code>
drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    ev.dataTransfer.effectAllowed ="copy";
    ev.dataTransfer.dropEffect = "move";
    this.evdrag = ev.srcElement;
    console.log(ev);

  }
</code>

html模板：

驱除

打字稿代码：

<code>drop(ev, index) {
    ev.preventDefault();
    if (this.data != '') {
      return;
    }
  this.optionHover1 = false;
    this.data = ev.dataTransfer.getData("text");
    this.evdrag.remove();
    // ev.target.appendChild(document.getElementById(this.data));
    this.checkAnswer(this.data, index);
  }</code>

Answer 1

html template: <pre>< div [ngClass]="{'dragged': dragged}" class="btn dragword text-center text-lowercase"
                style="font-size: 27px; color: rgb(115, 115, 115); height: 44px" id="Repellendus" draggable="true"
                (dragstart)="drag($event);">Repellendus</ div></pre>

typescript drop code:


 <code>drop(ev, index) {
    ev.preventDefault();
    if (this.data != '') {
      return;
    }
  this.optionHover1 = false;
    this.data = ev.dataTransfer.getData("text");
    this.evdrag.remove();
    // ev.target.appendChild(document.getElementById(this.data));
    this.checkAnswer(this.data, index);
  }</code>

Answer 2

改为在样式表中使用 CSS。

.dragging,
.dragword:active{
    cursor:move!important;
}

如果没有 StackBlitz，我无法真正重新创建它，但这是另一个想法。

模板（视图）

当它被拖动时添加一个dragging 类怎么样？

<div [ngClass]="{'dragging': dragging, 'dragging':dragging}" class="btn dragword" id="Repellendus" draggable="true(dragstart)="drag($event);">Repellendus</div>
</pre>

TypeScript

在拖动事件期间添加类怎么样？

element.addEventListener("dragstart", function(event) {
  // add `dragging` class
}, false);

element.addEventListener("dragend", function(event) {
  // remove `dragging` class
}, false);

在 Angular 中，我们会使用 @Hostlistener。这是我个人的StackBlitz 参考。

旁注：

每个拖动词 div 是否具有相同的 id？ id="Repellendus" 应该有好几个吧？