HTML5拖放

最新推荐文章于 2024-09-11 10:10:41 发布

yezi__626

最新推荐文章于 2024-09-11 10:10:41 发布

阅读量406

点赞数

本文链接：https://blog.csdn.net/yezi__6/article/details/82656369

版权

在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

1.在行内设置元素可拖放属性：把 draggable 属性设置为 true
如：<img draggable="true" />
2.拖动什么 :ondragstart
如：
3.dataTransfer.setData() 方法设置被拖数据的数据类型和值：
即：当元素拖动时，会发生什么
function drag(e)
{
e.dataTransfer.setData("image",e.target.id);
//数据类型为image，值为id
}
4.放在那里--ondragover
默认无法将元素放到其他元素中，若要放置，则必须阻止对元素的默认行为。
通过调用 ondragover 事件的 event.preventDefault() 方法：
5.进行放置 - ondrop
通过ondrop属性调用函数drop（e）
function drop(e)
{
var data=e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
注释：通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回
在 setData() 方法中设置为相同类型的任何数据。

写元素拖放功能的要点：

1.设置允许拖放属性：<img draggable="true" />

2.开始拖动时：获取元素类型e.dataTransfer.setData("image",e.target.id);

3.阻止浏览器的默认行为：通过调用 ondragover 事件的 event.preventDefault() 方法：

4.利用ondrop事件，通过 dataTransfer.getData("Text") 方法获得被拖的数据。并将其追加到目标位置的元素上；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block{
            width: 200px;
            height: 200px;
            border: 1px solid silver;
            position: absolute;
            margin: 15% auto;
        }
    </style>
</head>
<body>
<div class="block" ondragover="over(event)" ondrop="drop(event)" ></div>
<img id="img" src="./logo/t01b2a269c0f4a37194.jpg" draggable="true"  width="120px" height="170px">
<script>
    var img=document.getElementById("img");
    img.ondragstart=function(event){//开始拖放时触发
        event.dataTransfer.setData("img", event.target.id);//设置数据类型为img
    }
    function over(event){
        event.preventDefault();//阻止浏览器对元素不许拖放的默认行为
    }
    function drop(event){
        var data= event.dataTransfer.getData("img");//取得上面设置的元素
        event.target.appendChild(document.getElementById(data));//将它追加给要拖放的目的目标
    }
</script>
</body>
</html>