拖动时退出禁止光标

Posted 2023-05-08

【中文标题】拖动时退出禁止光标

【英文标题】：Quit the forbbiden cursor while dragging

【发布时间】：2019-10-27 01:22:34

【问题描述】：

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>

【参考方案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>

【讨论】：

我会将此添加到您的问题中并格式化它非常好！那么你也会得到更多的答案！

【参考方案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" 应该有好几个吧？

【讨论】：

感谢您的宝贵时间，但它不起作用。当我拖动时，它仍然显示默认的禁止光标。当我点击我点击它时光标移动显示，但是当我拖动到其他地方时，默认禁止光标显示:(

好的问题时间，我想帮助更多。您可以发布更多代码吗？让我们确保您的 mouseDown（拖动）事件设置正确。

对不起伙计，我是个初学者，当你谈论mouseDown时你在说什么？ html模板？还是掉落？，我两个都送。

每个 div 都有其特定的 id，即发送到放置区的信息。 @hostlistener 在拖动元素时更改样式？我尝试在拖动时更改类，但仍然出现相同的禁止光标，这是我现在在第一条评论中发布的一个

你必须在 Stackblitz 中复制它