自定义光标，拖放不带库的HTML元素

Question

我有一个具有一些可拖动元素的HTML页面。我们的规格说鼠标悬停在这样的元素上光标必须是是grab，并且在拖动光标期间必须是是grabbing。

我知道这是可以设置dropEffect从而改变光标外观上面放置区域，但也有很少的选择：copy，move，link，并且none - 没有定制或相似。

我试图用Javascript和CSS改变光标，比如设置cursor: grabbing;，当ondragstart被触发。但是拖放拖放区时会出现浏览器默认移动光标。

所以问题是：在拖动过程中我错过了如何显示抓取光标（）？

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

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>

Answer 1

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

如果jQuery是不是一种选择，一个可能的方式围绕是实现从头拖动&下降，使用鼠标事件和克隆源元件：

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>

Answer 2

我知道只是用纯JavaScript可拖动的元素一点点，我很抱歉，我无法解释以下。

问题是，onDragEnd从来没有被解雇，所以我搜索了一些东西，找到这个带有可拖动元素的example。
现在，如果你改变了onDragStart事件的功能，它可以工作，但我认为你必须改变光标以另一种方式想更改类身体onDragStart

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

所有的在一个

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

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

Answer 3

这是一个已知的问题报道here

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

我的尝试给了我以下。用抓住光标在元素上给出一个active。当它处于活动状态时，光标将会改变，但是一旦你开始拖动，它会自动改变。

我试图设置body光标抓住dragstart但没有结果。即使它不起作用。

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

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

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

Answer 4

试试这个！这个对我有用 ！

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

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

Answer 5

我花了一段时间找到解决方案，以此技巧结束。我觉得这是最好的方式少代码和适合工作。

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

} 

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