带有拖放 HTML 元素的自定义光标，无需库 [英] Custom cursor with drag and drop an HTML element without libraries

问题描述

我有一个 HTML 页面，其中包含一些可拖动元素.我们的规范说，将鼠标悬停在此类元素上，光标必须 grab ，并且在拖动光标时必须抓取 .

我知道可以设置 ) 在拖动过程中?

很遗憾，我无法在解决方案中使用 JQuery 或其他帮助库.提前致谢！

var onDragStart = function(event) {event.dataTransfer.setData("Text", event.target.id);event.currentTarget.classList.add("被拖动");};var onDragEnd = 函数(事件){event.currentTarget.classList.remove("被拖动");};var onDragOver = 函数(事件){event.preventDefault();};

.dropzone {宽度:500px；高度:200px；背景颜色:银色；}.堵塞 {位置:绝对；背景颜色:粉红色；边距:10px；边框:20px纯粉色；}.dragable {光标:-webkit-grab；光标:抓取；}.被拖动{光标:-webkit 抓取；光标:抓取；背景颜色:红色；}

<div class = "dropzone"ondragover = "onDragOver(事件);">抓取并拖动方块<div class = "可拖动块"可拖动=真"ondragstart = "onDragStart(事件);"ondragend = "onDragEnd(事件);">我是可拖动的

解决方案

似乎浏览器不允许在拖动开始时更改光标 &下降操作.我不知道为什么，但这是一个已知问题，我相信他们将来会这样做.

如果 jQuery 不是一个选项，一种可能的解决方法是实现拖动 &从头开始，使用鼠标事件并克隆源元素:

var onDragStart = function (event) {event.preventDefault();var clone = event.target.cloneNode(true);clone.classList.add("拖动");event.target.parentNode.appendChild(clone);var style = getComputedStyle(clone);克隆.拖动 = {x: (event.pageX||(event.clientX+document.body.scrollLeft)) - clone.offsetLeft + parseInt(style.marginLeft),y: (event.pageY||(event.clientY+document.body.scrollTop)) - clone.offsetTop + parseInt(style.marginTop),来源:event.target};};var onDragMove = 函数(事件){if (!event.target.drag) {return;}event.target.style.left = ((event.pageX||(event.clientX+document.body.scrollLeft)) - event.target.drag.x) + "px";event.target.style.top = ((event.pageY||(event.clientY+document.body.scrollTop)) - event.target.drag.y) + "px";};var onDragEnd = 函数(事件){if (!event.target.drag) {return;}//定义persist true 让源持久化并删除目标，否则持久化目标.varpersist = true;如果(坚持 || event.out){event.target.parentNode.removeChild(event.target);} 别的 {event.target.parentNode.removeChild(event.target.drag.source);}event.target.classList.remove("拖动");event.target.drag = null;};var onDragOver = 函数(事件){event.preventDefault();};

.dropzone {宽度:500px；高度:200px；背景颜色:银色；}.堵塞 {位置:绝对；背景颜色:粉红色；边距:10px；边框:20px纯粉色；}.dragable {位置:绝对；光标:指针；/* IE */光标:-webkit-grab；光标:抓取；}.拖动{光标:-webkit 抓取；光标:抓取；背景颜色:红色；}

抓取并拖动方块<div class = "可拖动块"onmousedown = "onDragStart(event);"onmousemove = "onDragMove(事件);"onmouseup = "onDragEnd(event);"onmouseout = "event.out = true; onDragEnd(event);">我是可拖动的

I have an HTML page which has some draggable elements. Our specs say that hovering mouse on such element the cursor must be grab , and during drag cursor must be grabbing .

I know it is possible to set dropEffect which changes cursor appearance above drop zone, but there are very little options: copy, move, link, and none -- no custom or alike.

I have tried to change cursor with Javascript and CSS, like setting cursor: grabbing; when ondragstart is fired. But browser default move cursor appears instead when dragging on drop zone.

So the question is: What am I missing to show grabbing cursor () during drag?

Unfortunately I cannot use JQuery or other helping libraries in the solution. Thanks in advance!

var onDragStart = function(event) {
    event.dataTransfer.setData("Text", event.target.id);
    event.currentTarget.classList.add("being-dragged");
};

var onDragEnd = function(event) {
    event.currentTarget.classList.remove("being-dragged");
};

var onDragOver = function(event) {
    event.preventDefault();
};

.dropzone {
    width: 500px;
    height: 200px;
    background-color: silver;
}

.block {
    position: absolute;
    background-color: pink;
    margin: 10px;
    border: 20px solid pink;
}

.draggable {
    cursor: -webkit-grab;
    cursor: grab;
}

.being-dragged {
    cursor: -webkit-grabbing;
    cursor: grabbing;
    background-color: red;
}

<div class      = "dropzone"
    ondragover  = "onDragOver(event);"
    >
    Grab and drag block around
    <div class      = "draggable block"
        draggable   = "true"
        ondragstart = "onDragStart(event);"
        ondragend   = "onDragEnd(event);"
        >
        I'm draggable
    </div>
</div>

解决方案

It seems that browsers don't allow changing the cursor at the beginning of a drag & drop operation. I don't know why but it's a known issue, I believe they will in the future.

If jQuery is not an option, a possible way around is to implement a drag & drop from scratch, using mouse events and cloning the source element:

var onDragStart = function (event) {
  event.preventDefault();
  var clone = event.target.cloneNode(true);
  clone.classList.add("dragging");
  event.target.parentNode.appendChild(clone);
  var style = getComputedStyle(clone);
  clone.drag = {
    x: (event.pageX||(event.clientX+document.body.scrollLeft)) - clone.offsetLeft + parseInt(style.marginLeft),
    y: (event.pageY||(event.clientY+document.body.scrollTop)) - clone.offsetTop + parseInt(style.marginTop),
    source: event.target
  };
};

var onDragMove = function (event) {
  if (!event.target.drag) {return;}
  event.target.style.left = ((event.pageX||(event.clientX+document.body.scrollLeft)) - event.target.drag.x) + "px";
  event.target.style.top = ((event.pageY||(event.clientY+document.body.scrollTop)) - event.target.drag.y) + "px";
};

var onDragEnd = function (event) {
  if (!event.target.drag) {return;}
  // Define persist true to let the source persist and drop the target, otherwise persist the target.
  var persist = true;
  if (persist || event.out) {
    event.target.parentNode.removeChild(event.target);
  } else {
    event.target.parentNode.removeChild(event.target.drag.source);
  }
  event.target.classList.remove("dragging");
  event.target.drag = null;
};

var onDragOver = function (event) {
  event.preventDefault();
};

.dropzone {
  width: 500px;
  height: 200px;
  background-color: silver;
}

.block {
  position: absolute;
  background-color: pink;
  margin: 10px;
  border: 20px solid pink;
}

.draggable {
  position: absolute;
  cursor: pointer; /* IE */
  cursor: -webkit-grab;
  cursor: grab;
}

.dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  background-color: red;
}

<div class="dropzone" onmouseover="onDragOver(event);">
  Grab and drag block around
  <div class    = "draggable block"
    onmousedown = "onDragStart(event);"
    onmousemove = "onDragMove(event);"
    onmouseup   = "onDragEnd(event);"
    onmouseout  = "event.out = true; onDragEnd(event);"
  >
    I'm draggable
  </div>
</div>

这篇关于带有拖放 HTML 元素的自定义光标，无需库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！