浏览器拖拽操作

最新推荐文章于 2024-08-20 15:15:10 发布

_Captain_

最新推荐文章于 2024-08-20 15:15:10 发布

阅读量608

点赞数

分类专栏：浏览器API 原生拖拽文章标签： html5 前端

本文链接：https://blog.csdn.net/qq_39807732/article/details/114701834

版权

浏览器API 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

原生拖拽

1 篇文章 0 订阅

订阅专栏

可拖拽的元素：定义draggable熟悉指明元素可拖拽（文本、图片默认可拖拽）
可放置的区域：监听dragover事件，阻止事件默认行为（返回false或者调用e.preventDefault()）指明该区域可放置元素。此事件会被浏览器频繁调用，应减少这里的逻辑。
可放置的区域：如果该区域可放置元素则会触发drop事件，否则不触发。
将元素放置在可放置区域需要在drop事件中需要自行操作，如使用appendChild。

简单示例：

<script>
function drag_handler(ev) {
 console.log("Drag");
}

function dragstart_handler(ev) {
 console.log("dragStart");
 ev.dataTransfer.setData("text", ev.target.id);
}

function drop_handler(ev) {
 console.log("Drop");
 ev.currentTarget.style.background = "lightyellow";

 ev.preventDefault();
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}

function dragover_handler(ev) {
 console.log("dragOver");
 ev.preventDefault();
}
</script>
<body>
<h1>Examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1>
 <div>
   <p id="source" ondrag="drag_handler(event);" 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>