Выйдите из запретного курсора при перетаскивании - PullRequest
Новая
       33

Выйдите из запретного курсора при перетаскивании

0 голосов
/ 12 июня 2019

https://imgur.com/Ek3CAOt

Я хочу выйти из курсора запрета при перетаскивании элемента.Я использую HTML5 по умолчанию перетаскивания.я использую машинопись

я пытался перейти с ev.target.style.cursor на курсор "захватить", я пытался перейти с 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>

Ответы [ 2 ]

0 голосов
/ 12 июня 2019 
<code>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>
машинописный код сброса: 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); }
0 голосов
/ 12 июня 2019

С CSS в вашей таблице стилей. 

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

Без StackBlitz я не смогу воссоздать это, но вот еще одна идея.

Шаблон (просмотр)

А как насчет добавления класса dragging для его перетаскивания? 

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

машинопись

А как насчет добавления класса во время события перетаскивания? 

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

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

В Angular мы использовали бы @Hostlistener. Вот мой личный StackBlitz справочник для этого.

Sidenote:

У каждого элемента dragword один и тот же идентификатор? id="Repellendus" Их должно быть несколько, верно?

...