导航栏: 首页 评论列表

页面拖拽文字时的鼠标/光标

默认分类 2020/09/28 03:08

页面拖拽文字时的鼠标/光标:

<!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>


>> 留言评论