CODEWITHSUNDEEP
htmlangulardrag-and-dropdrag
desperateProgrammer
desperateProgrammer

Reputation: 31

Quit the forbbiden cursor while dragging

https://i.sstatic.net/WIBWr.jpg

i want to quit the forbbiden cursor while im dragging an element. im using html5 default drag and drop. im using typescript

ive tried to change from ev.target.style.cursor to the "grab" cursor, i tried to change from dropEffect and so on, but none of them make the desire effect. here is the drag code.

<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 template: 

< 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

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>

Upvotes: 1

Views: 325

Answers (2)

Ben Racicot
Ben Racicot

Reputation: 5980

With CSS in your stylesheet instead.

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

Without a StackBlitz I can't really recreate this but here is another idea.

Template (view)

What about adding a dragging class for when it is being dragged? 

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

TypeScript

What about adding the class during the drag event?

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

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

In Angular we'd use @Hostlistener though. Here is my personal StackBlitz reference for that.

Sidenote:

Does each dragword div have the same id? id="Repellendus" There must be several of these right?

Upvotes: 0

desperateProgrammer
desperateProgrammer

Reputation: 31

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>

Upvotes: 0

Related Questions