浏览器的默认拖放 - 它应该如何与选定的文本一起使用？

Question

我知道 HTML5 提供 drag and drop API, which make it easy to make elements drag-able. However, some elements are drag-able by default:

Within a web page, there are certain cases where a default drag behavior is used. These include text selections, images, and links. When an image or link is dragged, the URL of the image or link is set as the drag data, and a drag begins.

因此，某些元素（例如选定的文本）不需要 draggable attribute in order to be drag-able. I couldn't find anything mentioned about it the w3c spec，因此：

我应该如何使用默认的拖放行为获取选定的文本数据？
标准对本质上可拖动的元素有何说法？我想知道我是否指望它在所有现代浏览器上都能正常工作...

Answer 1

更新：我已经写了一篇关于这个问题的 blog

默认情况下 Drag-Able 似乎更简单，因为它们只需要使用 dataTransfer 传递所需的数据。属性 draggable 不是必需的。

请参阅下面的片段或我更详尽的 Codepen。

function allowDrop(ev) {
    ev.preventDefault();
}
  
function drag(ev) {
    const selection  = document.getSelection();
    ev.dataTransfer.setData('text:', selection.toString());
}

function drop(ev) {
    document.getElementById('drop').innerHTML = ev.dataTransfer.getData('text');
}

  div {
      padding: 20px;
      margin: 20px;
      border: 1px dashed gray
  }

  .drop-zone {
      border: 2px solid black
  }

<div id="drop" class="drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)">
  Drop here
</div>

<div ondragstart="drag(event)">orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

浏览器的默认拖放 - 它应该如何与选定的文本一起使用？

Browser's default drag and drop - how should it be used with selected text?

html

javascript

drag-and-drop

draggable

drag