页面拖拽文字时的鼠标/光标:
<!DOCTYPE html>
<html lang=en>
<title>Examples of DataTransfer.{dropEffect,effectAllowed} properties</title>
<meta content="width=device-width">
<style>
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
</style>
<script>
function dragover_handler(ev) {
ev.preventDefault();
// 设置 dropEffect 为 move
// 1.dropEffect: 拖拽交互类型,通常决定浏览器如何显示鼠标光标并控制拖放操作.常见的取值有copy,move,link和none
// 2.effectAllowed: 指定允许的交互类型,可以取值:copy,move,link,copyLink,copyMove,limkMove, all, none默认为uninitialized(允许所有操作)
ev.dataTransfer.dropEffect = "copy"
}
// function dragstart_handler(ev) {
// // 将这个元素的id添加到drag载荷中,
// // 以便drop事件知道将哪个元素添加到其树中。
// ev.dataTransfer.setData("text", ev.target.id);
// ev.dataTransfer.effectAllowed = "copy";
// }
// function drop_handler(ev) {
// ev.preventDefault();
// // 得到目标的id并且将移动的元素添加到目标DOM中
// var data = ev.dataTransfer.getData("text");
// ev.target.appendChild(document.getElementById(data));
// }
<\/script>
<body>
<h1>Examples <code>DataTransfer</code>.{<code>dropEffect</code>, <code>effectAllowed</code>} properties</h1>
<div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>
</html>