使用vue.js更改光标以使其无法在chrome中工作

Question

我正在尝试更改chrome中可拖动项目的光标。我试过的一切都没有用。 Stackoverflow上有解决方案，但它们都已过时，无法使用实际的chrome版本。

在拖动时，项目被复制到容器，该容器是可拖动的拖放图像。

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

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

new Vue({
		el: '#app',
		data: {
    		text_drop: 'Droppable Area',
        text_drag: 'Drag Area',
        drag_elements: [
        {text: 'one', selected: true},
        {text: 'two', selected: false},
        {text: 'three', selected: false},
        {text: 'four', selected: false},
        ]
    },
    computed: {
        selected_elements(){
            let selected = [];
            this.drag_elements.map((drag) => {
                if(drag.selected){
                  selected.push(drag);
                }
            })
            return selected;
        }
    },
    methods: {
    		drag_it(event){
        		let html = document.getElementById("dragElement");
            let drop_docs = this.selected_elements;
            if(drop_docs.length > 1){
            let multiple = document.createElement('div');
                        multiple.classList.add('dragMultiple');
                        multiple.innerHTML = drop_docs.length + ' items';
                        html.innerHTML = '';
                        html.appendChild(multiple)
            }else{
                        html.innerHTML = event.target.outerHTML;
            }
						event.dataTransfer.setData('text/plain', '' );
            event.dataTransfer.setDragImage(html, 0, 0);
            event.dataTransfer.effectAllowed = "move";
        }, 
        drag_over(event){
            document.documentElement.style.cursor="-webkit-grabbing";
        },
        drag_end(event){
            document.documentElement.style.cursor="default";
        },
        select(event, drag_element){
          if(event.metaKey || event.shiftKey){
             drag_element.selected = !drag_element.selected;
          } else {
             this.drag_elements.map((drag) => {
                if(drag === drag_element){
                    drag.selected = true;
                }else{
                    drag.selected = false;
                }
            })
          }
        }
    }
})

#Dragme{
  width: 200px;
  height: 50px;
  margin-left: 20px;
  text-align: center;
  border:1px solid black;
  float:left;
}

#Dragme:hover {
   cursor: -webkit-grab;
}

#Dragme:active {
   cursor: -webkit-grabbing;
}

   
#Dropzone{
  float: left;
  width: 500px;
  height: 100px;
  border: 1px solid;
  margin-bottom: 50px;
}

.selected{
  border: 2px solid yellow !important; 
}

.dragMultiple{
  border: 1px solid black;
  padding: 10px;
  background-color: white;
}

#dragElement{
  position: absolute;
  top: 400px;
}

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
  <div id="Dropzone">{{text_drop}}</div>
  <div id="drag_elements">
  <div v-for="drag in drag_elements"
       @dragstart="drag_it"
       @dragover="drag_over"
       @dragend="drag_end"
       @mouseup="select($event, drag)"
       draggable="true" 
       :class="{selected: drag.selected}"
       id="Dragme">{{drag.text}}</div>
  </div>
</div>

<div id="dragElement">

</div>

更新实际上它可以通过以下答案CSS for grabbing cursors (drag & drop)解决

添加dndclass很重要

谢谢

大段引用

@Carr提示

Dragend之后更新或删除光标未设置为默认值。只有在移动时它才会变回。有任何想法吗？

更新使用Mac上的命令键或Shift键可以选择并拖动多个项目。为此目的创建了一个新的dragitem，但是在dragend或drop之后光标并不会全部回落。

更新积分方法从回答-by Carr

Answer 1

实际上，setDragImage api是设置图像以替换默认光标而不是光标本身的普通文档图标。所以关于'.dragElement'的代码没有按预期运行，它不稳定并且在我测试时会产生奇怪的效果，我已经在我的答案中删除了它们。

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

new Vue({
    el: '#app',
    data: {
        text_drop: 'Droppable Area',
        text_drag: 'Drag Area'
    },
    methods: {
        drag_it(event){
            event.dataTransfer.setData('text/plain', '' );
            event.dataTransfer.effectAllowed = "move";
        },
        drag_over(event){
            document.documentElement.style.cursor="-webkit-grabbing";
        },
        drag_end(event){
            document.documentElement.style.cursor="default";
        }
    }
})

#Dragme{
  width: 200px;
  height: 50px;
  text-align: center;
  border:1px solid black;
  float:left;
}
   
#Dragme:hover {
  cursor: -webkit-grab;
}

#Dragme:active {
  cursor: -webkit-grabbing;
}

#Dropzone{
  float: left;
  width: 300px;
  height: 100px;
  border: 1px solid;
  margin-bottom: 50px;
}

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
  <div id="Dropzone">{{text_drop}}</div>
  <div @dragstart="drag_it"
       @dragover="drag_over"
       @dragend="drag_end"
       draggable="true" 
       id="Dragme">{{text_drag}}</div>
</div>

更新 - 关于原始问题的派生问题

• “dragImage”粘在底部，所有元素都消失了，或者有时闪烁。

• 这里仍然是一个奇怪的部分，id属性应该是唯一的：

• 并添加MDN document关于setDragImage的引用，我错误地回忆起svg的评论，它应该是canvas：

...图像通常是<image>元素，但它也可以是<canvas>或任何其他图像元素。 ...

• 我们可以draw text in canvas，这是另一个问题。