拖动时的 CSS 光标

Question

我有一个像这样的div，但是当我拖动这个div时，光标会自动变为那个disabled。我怎样才能解决这个问题？

div {
  background-color: red;
  width: 10px;
  height: 10px;
  cursor: e-resize;
}

<div draggable="true"></div>

div 必须包含该draggable属性，因为我需要它用于其他用途。

Answer 1

1.发生了什么

该draggable属性表示

是否可以使用本机浏览器行为或HTML Drag and Drop API拖动元素。

当使用此属性使元素可拖动时，API 和浏览器将控制拖动期间光标的外观：

光标	意义
残疾人	你不能把方块扔到这里
复制	拖动的块将被复制到放置区域
移动	拖动的块将被移动到放置区域

等等。通过拖动效果，您可以定义块被放置后会发生什么，并且光标将在放置区域上改变其外观，以建议用户等待拖动的块的命运。

您还可以定义拖动图像，但这意味着不改变光标，而是将拖动的块本身变成图像:)

在此演示中，拖动几秒钟后，第二个块将更改为网站徽标。当 API 和浏览器认为合适时，两个可拖动块的光标会在放置区域上发生变化。

function imageOnDragging(event) {
  let img = new Image();
  img.src = "https://stackoverflow.com/favicon.ico";
  event.dataTransfer.setDragImage(img, 10, 10);
}

.demo {
  color: white;
  font: 15px Helvetica, sans-serif;
  margin-bottom: 10px;
  padding: 10px;
  width: 80px;
  height: 80px;
}

.drag-me {
  background-color: #369;
}

.drop-zone {
  background: #69c;
  float: right;
  width: 200px;
  height: 200px;
}

<div class="demo drop-zone" ondragover="event.preventDefault()">Drop zone</div>
<div class="demo drag-me" draggable="true">Drag me</div>
<div class="demo drag-me" draggable="true" ondragstart="imageOnDragging(event)">Image on dragging</div>

2. 可以做什么

您可以使用jQuery UI 中的Draggable交互来绕过该属性，简化您的工作，并能够使用 CSS 控制光标。

添加:active伪类以风格化块的拖动状态。

该演示使用Ben Kalsky 的CodePen的CSSgrab和光标。您可以将块拖放到任意位置。grabbing

https://codepen.io/glebkema/pen/YzEyxxb

$(function() {
  $(".draggable-by-jquery-ui").draggable();
});

.demo {
  color: white;
  font: 15px Helvetica, sans-serif;
  padding: 10px;
  width: 80px;
  height: 80px;
}

.drag-me.draggable-by-jquery-ui {
  background-color: #f60;
}

.draggable-by-jquery-ui {
  cursor: url("https://www.google.com/intl/en_ALL/mapfiles/openhand.cur"), all-scroll;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}

.draggable-by-jquery-ui:active {
  cursor: url("https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur"), all-scroll;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}

<div class="demo drag-me draggable-by-jquery-ui">Drag me wherever you want</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

3. 如果draggable属性是强制的

据我所知，即使块具有以下draggable属性，jQuery UI 也允许您设置光标的样式：

$(function() {
  $("[draggable=true]").draggable();
});

[draggable=true] {
  cursor: e-resize;
}

.demo {
  background-color: #f60;
  color: white;
  font: 15px Helvetica, sans-serif;
  padding: 10px;
  width: 80px;
  height: 80px;
}

<div class="demo" draggable="true">Fix the attribute</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>