拖拽drag_html5的拖放（drag和drop）

最新推荐文章于 2023-05-11 17:12:00 发布

VS华

最新推荐文章于 2023-05-11 17:12:00 发布

阅读量264

点赞数

文章标签：拖拽drag

本文链接：https://blog.csdn.net/weixin_36429576/article/details/112662138

版权

这篇博客探讨了如何使用HTML5的原生拖放API实现拖拽功能，并介绍了在Vue框架中如何集成这一特性。通过设置`draggable`属性和事件监听器，可以实现元素的拖放操作。

摘要由CSDN通过智能技术生成

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />

原生的写法：

draggable="true" οndragstart="drag(event)" 必须写到要拖拽的元素上面

οndrοp="drop(event)" οndragοver="allowDrop(event)" 拖到目的位置

<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>

vue中写法：

<span draggable="true" @dragstart="dragstart(xxx)" ></span>       要拖拽的元素
 
<router-view @dragover.native="dragover($event)" @drop.native="drop($event)" /> 目标元素

路由引用的页面点击不会响应，必须使用native

js:
    drop(e) {
       //拖动完之后事件 （鼠标松开）
    },
    dragover(e) {
      e.preventDefault();  //阻止浏览器的默认行为
    },
    dragstart(e) {
      console.log(e);
      //开始拖动事件
    },