HTML Drag and Drop API-CodePudding

Could anyone know why when I drag an Item on my lit items in a list, the cursor turns into a crossed circle, yet the draggable attribute is set to true.

Here is part of the code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<span >1</span>
<div  draggable="true">
  <p >Song 1</p>
  <i ></i>
</div>

<span >2</span>
<div  draggable="true">
  <p >Song 2</p>
  <i ></i>
</div>

CodePudding user response：

What do you want? The plus is "drag and add this to something"

If you want to change the cursor, do it

CSS for grabbing cursors (drag & drop)

Note Chrome on OSX changes the cursor back to default while dragging

.draggable {
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grab;
}


/* (Optional) Apply a "closed-hand" cursor during drag operation. */

.draggable:active {
  cursor: grabbing;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<span >1</span>
<div  draggable="true">
  <p >Song 1</p>
  <i ></i>
</div>

<span >2</span>
<div  draggable="true">
  <p >Song 2</p>
  <i ></i>
</div>

CodePudding user response：

Actually, I was dealing a default property here so I applied the preventDefault() method on the dragover attribute to remove the default property