Question

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

ive尝试将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模板：

< 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，我不能真正地重新创建它，但这是另一个想法。

模板（视图）

如何在拖动时添加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参考。

边注：

每个Dragword div是否具有相同的ID？ id="Repellendus"其中必须有几个权利？

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>

拖动时退出禁忌光标

2 个答案: