拖放

最新推荐文章于 2024-09-12 18:02:32 发布

八月π

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量97

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/zhangqian_1213/article/details/112875298

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML5的拖放API使用方法，包括dragstart、drag、dragenter、dragover、dragleave、drop和dragend等事件的顺序。通过示例展示了如何设置元素为可拖动，以及如何在不同或相同元素间交换位置。示例代码中包含允许拖放、放置元素的函数，并提供了兼容IE的解决方案。

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

时间触发的顺序：dragstart(drag元素) -> drag(drag元素) -> dragenter(drop元素) -> dragover(drop元素) -> dragleave(drop元素) -> drop(drop元素) -> dragend(drag元素)

设置元素为可拖动

<div draggable="true"></div>//将draggable属性设置为true

拖动的元素

<div draggable="true" ondragstart="drag(event)"></div>
//规定被拖动的数据
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);//数据类型(text)和值(可拖动元素的id)
}

放置的位置

<div ondragover="allowDrop(event)"></div>
function allowDrop(event){
    event.preventDefault();
}

进行放置

<div ondragover="allowDrop(event)" ondrop="drop(event)"></div>
function drop(ev){
    ev.preventDefault();
    var data=ev.data.Transfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

例子(多个div交换位置)

<div id="div1" draggable="true" ondragover="allowDrop(event)" ondrop="drop(event,this)" ondragstart="drag(event, this)"></div>
<div id="div2" draggable="true" ondragover="allowDrop(event)" ondrop="drop(event,this)" ondragstart="drag(event, this)"></div>

<script>
function allowDrop(ev)
{
    ev.preventDefault();
}
let srcDiv = null;
function drag(ev,divDom)
{
    srcDiv=divDom;
    ev.dataTransfer.setData("text/html",divDom.innerHTML);
}
function drop(ev,divDom)
{
    ev.preventDefault();
    if(srcDiv !== divDom){
        srcDiv.innerHTML = divDom.innerHTML;
        divDom.innerHTML=ev.dataTransfer.getData("text/html");
    }
}
</script>