自定义光标，拖放没有库的HTML元素

Question

我有一个HTML页面，其中包含一些可拖动的元素。我们的规格说将鼠标悬停在这样的元素上，光标必须为grab ，并且在拖动光标期间必须为grabbing { {3}}

我知道可以设置，将光标外观更改为放置区域，但选项很少：copy，move，link和{ {1}} - 没有自定义或类似。

我尝试使用Javascript和CSS更改光标，例如在none被触发时设置cursor: grabbing;。但是在拖放区拖动时会出现浏览器默认移动光标。

所以问题是： 在拖动过程中显示抓取光标（dropEffect）我缺少什么？

不幸的是，我不能在解决方案中使用JQuery或其他帮助库。提前谢谢！

＆＃13;

＆＃13;

ondragstart

＆＃13;

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();
};

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是一个已知问题here

拖动时，光标会自动更改为正常。

我的尝试给了我以下内容。使用抓取光标在元素上给出active。当它处于活动状态时，光标会发生变化，但一旦开始拖动，它就会自动改变。

我尝试将body光标设置为抓取dragstart但没有结果。即使它不起作用。

＆＃13;

＆＃13;

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();
};

＆＃13;

.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;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

如果jQuery不是一个选项，可能的方法是实现一个拖动和放大器。从头开始，使用鼠标事件并克隆源元素：

$LeftSide = $Diff | Where-Object {$_.SideIndicator -eq '<='} | 
            Foreach-object { $_.InputObject } 

#include <string>
#include <iostream>
#include <cstdlib>
#include <cstdio>
#include <array>

int main()
{
    std::string command("ls afskfksakfafkas 2>&1");

    std::array<char, 128> buffer;
    std::string result;

    std::cout << "Opening reading pipe" << std::endl;
    FILE* pipe = popen(command.c_str(), "r");
    if (!pipe)
    {
        std::cerr << "Couldn't start command." << std::endl;
        return 0;
    }
    while (fgets(buffer.data(), 128, pipe) != NULL) {
        std::cout << "Reading..." << std::endl;
        result += buffer.data();
    }
    auto returnCode = pclose(pipe);

    std::cout << result << std::endl;
    std::cout << returnCode << std::endl;

    return 0;
}

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();
};

Answer 3

试图弄清楚这一点，我经历了很多痛苦。可接受的答案是网络上的最佳答案，但是现在的最佳实践是使用元素的let index = this.gridData.findIndex(br => br.id == template.id); this.gridData[index]=template; this.cd.detectChanges(); 事件，该事件使您可以侦听元素上的拖拽行为并对其采取行动而不被装在.setPointerCapture API的狭behavior行为中。一种方法是这样的：

Drag

一个明显的礼物是，在后门没有偷偷发现游标的事实。

Answer 4

我对纯粹JavaScript的可拖动元素了解一点，对不起，我无法解释以下内容。

问题是onDragEnd永远不会被解雇，所以我搜索了一些东西并找到了带有可拖动元素的example。
现在，如果您更改onDragStart事件的功能，它将起作用，但我认为您必须以另一种方式更改光标，例如更改正文的类onDragStart

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

一体化

＆＃13;

＆＃13;

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();
};

＆＃13;

.dropzone {
  width: 500px;
  height: 500px;
  background-color: silver;
}
.block {
  width: 200px;
  height: 50px;
  background-color: pink;
}
.draggable1 {
  cursor: -webkit-grab;
  cursor: grab;
}
.being-dragged {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  background-color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

试试这个！它对我有用！

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

.draggable:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

Answer 6

我花了一些时间为此寻找解决方案，结束了这个技巧。我认为这是减少代码和工作的最佳方式。

.drag{
    cursor: url('../images/grab.png'), auto; 

}

.drag:active {
    cursor: url('../images/grabbing.png'), auto;
}