0

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 class="number">1</span>
<div class="draggable" draggable="true">
  <p class="song-name">Song 1</p>
  <i class="fas fa-grip-lines"></i>
</div>

<span class="number">2</span>
<div class="draggable" draggable="true">
  <p class="song-name">Song 2</p>
  <i class="fas fa-grip-lines"></i>
</div>
paulsm4
  • 114,292
  • 17
  • 138
  • 190
Kwanele Simelane
  • 82
  • 1
  • 8

2 Answers2

1

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 class="number">1</span>
<div class="draggable" draggable="true">
  <p class="song-name">Song 1</p>
  <i class="fas fa-grip-lines"></i>
</div>

<span class="number">2</span>
<div class="draggable" draggable="true">
  <p class="song-name">Song 2</p>
  <i class="fas fa-grip-lines"></i>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
0

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

Kwanele Simelane
  • 82
  • 1
  • 8
  • There is no dragover in your example – mplungjan Mar 01 '22 at 20:32
  • "dragover" is a "default property" *ONLY* because you're apparently using the Bootstrap class [draggable](https://mdbootstrap.com/docs/b4/jquery/plugins/draggable/) in your
    . It's not an "HTML thing"; it's a "Bootstrap thing". Unlike the DOM method [event.preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/defaultPrevented), which is "standard". SUGGESTION: consider reviewing the Bootstrap documentation to see if there might be a "better" solution.
     – paulsm4 Mar 01 '22 at 20:41
  • @paulsm4, please also note that I am not using any bootstrap in the project. – Kwanele Simelane Mar 01 '22 at 20:43
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 02 '22 at 01:25