Javascript 使用vue.js更改可拖动的光标在chrome中不起作用

我正在尝试更改chrome中可拖动项的光标。我试过的一切都不管用。Stackoverflow上有解决方案，但它们都过时了，不能与实际的chrome版本一起使用

拖动时，项目将复制到一个容器中，该容器是可拖动项目的绘图工具

我想要的是在拖动时有一个抓取光标。那怎么可能呢？有什么想法吗

有关示例，请参见我的代码段

newvue({
el:“#应用程序”，
数据：{
文本放置：“可放置区域”，
文字拖动：“拖动区域”，
拖放元素：[
{text:'one'，selected:true}，
{text:'two'，selected:false}，
{text:'three'，selected:false}，
{text:'four'，selected:false}，
]
},
计算：{
选定的元素（）{
让选定的=[]；
this.drag_elements.map（（drag）=>{
如果（拖动。选定）{
选中。推（拖）；
}
})
返回选中的；
}
},
方法：{
拖动它（事件）{
让html=document.getElementById（“DrageElement”）；
让drop_docs=this.selected_元素；
如果（drop_docs.length>1）{
让multiple=document.createElement（'div'）；
multiple.classList.add（'dragMultiple'）；
multiple.innerHTML=drop_docs.length+“items”；
html.innerHTML=''；
appendChild（多个）
}否则{
html.innerHTML=event.target.outerHTML；
}
event.dataTransfer.setData（'text/plain'，''）；
setDragImage（html，0，0）；
event.dataTransfer.effectAllowed=“移动”；
}, 
拖过（事件）{
document.documentElement.style.cursor=“-webkit grabbing”；
},
拖放结束（事件）{
document.documentElement.style.cursor=“默认”；
},
选择（事件，拖动元素）{
if（event.metaKey | | event.shiftKey）{
drag_element.selected=！drag_element.selected；
}否则{
this.drag_elements.map（（drag）=>{
如果（拖动===拖动元素）{
drag.selected=true；
}否则{
drag.selected=false；
}
})
}
}
}
})

#Dragme{
宽度：200px；
高度：50px；
左边距：20px；
文本对齐：居中；
边框：1px纯黑；
浮动：左；
}
#悬停{
光标：-webkit抓取；
}
#德拉格梅：活跃{
光标：-webkit抓取；
}
#下降区{
浮动：左；
宽度：500px；
高度：100px；
边框：1px实心；
边缘底部：50px；
}
.选定{
边框：2件纯色黄色！重要；
}
dragMultiple先生{
边框：1px纯黑；
填充：10px；
背景色：白色；
}
#排水管{
位置：绝对位置；
顶部：400px；
}

{{text_drop}}
{{drag.text}

事实上，

setDragImage

api是用来设置图像，用默认光标而不是光标本身来替换旁边的普通文档图标。所以您关于“.dragElement”的代码并没有像您预期的那样工作，它不稳定，在我测试时会产生奇怪的效果，我已经在我的答案中删除了它们

我在下面所做的有点棘手，但我认为至少在逻辑上是正确的。然而，也许有一个更优雅的解决方案

newvue({
el:“#应用程序”，
数据：{
文本放置：“可放置区域”，
文字拖动：“拖动区域”
},
方法：{
拖动它（事件）{
event.dataTransfer.setData（'text/plain'，''）；
event.dataTransfer.effectAllowed=“移动”；
},
拖过（事件）{
document.documentElement.style.cursor=“-webkit grabbing”；
},
拖放结束（事件）{
document.documentElement.style.cursor=“默认”；
}
}
})

#Dragme{
宽度：200px；
高度：50px；
文本对齐：居中；
边框：1px纯黑；
浮动：左；
}
#悬停{
光标：-webkit抓取；
}
#德拉格梅：活跃{
光标：-webkit抓取；
}
#下降区{
浮动：左；
宽度：300px；
高度：100px；
边框：1px实心；
边缘底部：50px；
}

{{text_drop}}
{{text_drag}}

您试过这个吗？是的，我也可以将它添加到代码片段中，以证明我需要绘图工具。如果我拖动多个图标，我将使用它作为一个共容器来写入。“拖动2项”。所以我必须有这个dragelement。@Silve2611我认为保留该元素并在其上做一些事情是可以的，只需将“抓取光标”的逻辑分开就行了？顺便说一句，我以前没有学习过多次拖动，根据这一点，它似乎只在Firefox？上可用，而且在我的理解中，

setDragImage

api只接受

img

或

svg

元素。看看我更新的答案。它起作用了。您可以将html设置为图像。@Silve2611我看到了，但正如我所说的，在我的测试中，它非常不稳定，大部分时间后面的所有元素都消失了，有时您的“绘图”并没有放在光标旁边，而是粘在底部，我上传了一个屏幕截图，在我的答案中显示了这一点。然而，正如我所说的，将我的解决方案集成到您的解决方案中是可以的，它们在逻辑上不会有冲突。我已经编辑了你的，由你来接受：）