javascript - 使用 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很重要

谢谢

block 引用

@Carr 的提示

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

更新 使用 mac 上的 command 键或 shift 键可以选择和拖动多个项目。为此目的创建了一个新的 dragitem，但光标并不总是在 dragend 或 drop 后退回。

更新 将方法集成到来自答案 - 作者: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 :

... The image will typically be an <image> element but it can also be a <canvas> or any other image element. ...

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