HTML 拖放 API

Question

誰能知道為什么當我在列表中的點亮項目上拖動一個項目時， cursor 變成一個交叉的圓圈，但draggable屬性設置為true 。

這是代碼的一部分

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <span class="number">1</span> <div class="draggable" draggable="true"> <p class="song-name">Song 1</p> <i class="fas fa-grip-lines"></i> </div> <span class="number">2</span> <div class="draggable" draggable="true"> <p class="song-name">Song 2</p> <i class="fas fa-grip-lines"></i> </div>

Answer 1

你想要什么？ 加號是“將其拖動並添加到某物中”

如果您想更改 cursor，請執行此操作

CSS 用於抓取光標（拖放）

注意 OSX 上的 Chrome 在拖動時將 cursor 更改回默認值

 .draggable { cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; } /* (Optional) Apply a "closed-hand" cursor during drag operation. */.draggable:active { cursor: grabbing; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <span class="number">1</span> <div class="draggable" draggable="true"> <p class="song-name">Song 1</p> <i class="fas fa-grip-lines"></i> </div> <span class="number">2</span> <div class="draggable" draggable="true"> <p class="song-name">Song 2</p> <i class="fas fa-grip-lines"></i> </div>

Answer 2

實際上，我在這里處理一個默認屬性，所以我在dragover屬性上應用了preventDefault()方法來刪除默認屬性