拖动时退出forbbiden光标

Question

https://imgur.com/Ek3CAOt

我想在拖动元素时退出forbbiden光标。im使用html5默认拖放。我正在使用打字脚本

我试着从电动汽车转向电动汽车。目标风格光标到“抓取”光标，我试图从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模板：

< 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

打字稿删除代码：

<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

在样式表中使用CSS。

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

如果没有StackBlitz，我真的无法重现这一点，但这里有另一个想法。

模板（视图）

当拖动类时，为其添加一个拖动类怎么样？

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

打字稿

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

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

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

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

旁注：

每个dragword分区都有相同的id吗id=“disependedus”必须有几个，对吗？

Answer 2

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>