What is the difference between no-drop and not-allowed in CSS?

Question

I was surprised to see that the cursor styles for "no-drop" and "not-allowed" are same in nature in CSS. So, why do we need them both?

Answer 1

While they may cause the same effect on most systems, they are semantically different, allowing the browser and / or system to implement a different graphic for each case. no-drop implies that the element does not implement the drag-and-drop API, while not-allowed is a generic term meaning that some action is not enabled on the element.

div {
  padding: 5px;
  margin: 5px;
}

pre {
  display: inline-block;
  background-color: #DDDDDD;
}

.no-drop {
  background-color: #DD22DD;
  cursor: no-drop;
}

.not-allowed {
  background-color: #DDDD22;
  cursor: not-allowed;
}

<div class="no-drop">This area displays the <pre>no-drop</pre> cursor.</div>

<div class="not-allowed">This area displays the <pre>not-allowed</pre> cursor.</div>