javascript - 更改将文件拖到网页上时工具提示的内容

Question

当您将文件拖过网页上的拖放区时，如何更改显示的工具提示文本？默认情况下，它会显示“移动”，例如:

我正在开发一个 JavaScript 网络应用程序，并希望将其内容更改为对我的应用程序更有意义的内容。是否可以使用 CSS 或是否需要 JavaScript？

Answer 1

消息由操作系统处理，但您可以通过设置 event.dataTransfer.dropEffect 来改变效果到以下选项之一:

• 复制

  A copy of the source item is made at the new location.

• 移动

  An item is moved to a new location.

• 链接

  A link is established to the source at the new location.

• 无

  The item may not be dropped.

看这个例子:

var dropZone = document.getElementById('drop-zone');
var select = document.getElementById('effectSelect');

dropZone.addEventListener('dragover', function(event) {
  event.preventDefault();
  event.dataTransfer.dropEffect = select.value;
});

dropZone.addEventListener('drop', function(event) {
  event.preventDefault();
});

#drop-zone {
  width: 250px;
  height: 60px;
  border: 3px dashed #aaaaaa;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #444;
}

Select the effect:

<select id="effectSelect">
    <option value="copy">copy</option>
    <option value="move">move</option>
    <option value="link">link</option>
    <option value="none">none</option>
</select>
<div id="drop-zone">Drag anything from your OS here</div>

您可以获得有关dataTransfer 的更多信息here .