HTML5的拖拽drag属性

最新推荐文章于 2024-01-16 21:39:28 发布

星中媛

最新推荐文章于 2024-01-16 21:39:28 发布

阅读量939

点赞数

本文链接：https://blog.csdn.net/weixin_45012866/article/details/110129192

版权

对图片进行单向拖拽

<img draggable="true">

将元素设置为可以拖拽。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 200px;
            border: yellow solid 2px;
        }
    </style>
</head>
<body>
<p>请把下面的图片拖拽到框框里面</p>
<!--ondragover 事件规定被拖动的数据能够被放置到何处。-->
<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<!--ondragstart规定拖动什么内容-->
<img id="drag1" src="../img/011.png" draggable="true" ondragstart="drag(event)">
<script>
    function drag(ev) {
        //设置拖动的格式和数据。使用事件对象的ID来表示数据
        //dataTransfer.setData() 方法设置被拖动数据的数据类型和值：
        ev.dataTransfer.setData("Text",ev.target.id);//数据类型是 "text"，而值是这个可拖动元素的 id ("drag1")。

    }
    // 当放开被拖数据时，会发生 drop 事件。
    function drop(ev) {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    function allowDrop(ev) {
        // 默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。
        ev.preventDefault();
    }
</script>
</body>
</html>

以上的代码就可以实现将一个照片拖拽到另外一个框框中。

对标题进行双向拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1,#box2{
            width: 200px;
            height: 200px;
            border: blue solid 3px;
        }
    </style>
</head>
<body>
<div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h1 draggable="true" id="con" ondragstart="drag(event)">我是标题</h1>
</div>
<div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
    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));
    }
    function allowDrop(ev) {
        ev.preventDefault();
    }
</script>
</body>
</html>

星中媛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5的拖拽drag属性

对图片进行单向拖拽<img draggable="true">将元素设置为可以拖拽。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 300px; height
复制链接

扫一扫