大家好，
請問在【HTML5】拖曳時，cursor(鼠標)會自動變成 no allowed，如下
如果我想改成在拖曳時，cursor(鼠標)變成其他樣式，如下
請問該怎麼做?
已邀請的邦友 {{ invite_list.length }}/5
在 HTML 中，你可以使用 CSS 的 cursor 屬性來修改鼠標圖示。當你拖曳元件時，你可以透過設定 cursor 屬性來改變鼠標的外觀。
以下是一個示例，展示如何在拖曳元件時改變鼠標圖示：
<!DOCTYPE html>
<html>
<head>
<style>
.drag-element {
width: 100px;
height: 100px;
background-color: red;
cursor: move; /* 初始狀態下的鼠標圖示 */
}
.drag-element:active {
cursor: grabbing; /* 拖曳時的鼠標圖示 */
}
</style>
</head>
<body>
<div class="drag-element" draggable="true"></div>
<script>
var dragElement = document.querySelector('.drag-element');
dragElement.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', 'Drag Element');
});
</script>
</body>
</html>
在這個示例中，我們使用了 .drag-element 這個 CSS 類別來定義拖曳的元件，並設定了初始狀態下的 cursor 屬性為 move，表示鼠標圖示為移動的樣式。當元件被拖曳時，我們使用 :active 樣式來設定 cursor 屬性為 grabbing，表示鼠標圖示為抓取的樣式。
在 JavaScript 中，我們使用 dragstart 事件來啟動拖曳操作。在這個事件的處理函式中，我們使用 event.dataTransfer.setData() 方法來設定拖曳的資料類型和內容。
你可以根據自己的需求調整示例中的鼠標圖示樣式，並根據元件的不同狀態進行相應的設定。
a:active {
cursor: no allowed url
}
a 會是你想要作用的範圍
拖曳邏輯應該比較接近 active，可以試試看
iThome鐵人賽
看影片追技術