javascript+css实现拖拽效果（点击图片，图片返回原区域）

最新推荐文章于 2024-07-19 14:42:54 发布

wangxinyue_blog

最新推荐文章于 2024-07-19 14:42:54 发布

阅读量1.2k

点赞数

文章标签： javascript css

本文链接：https://blog.csdn.net/wangxinyue_blog/article/details/78731871

版权

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>拖拽实例</title>

    <style type="text/css">
        div {

            border: 3px dashed #ccc;

            margin: 10px auto;

            padding: 10px;

            height: 300px;

            width: 800px;

        }
    </style>

</head>



<body>

    <div id='d1'>

        <img src="http://image.biaobaiju.com/uploads/20190114/20/1547469081-ytacOZdCWK.jpg" id='img1' draggable="true"
            width="240">

        <img src="http://image.biaobaiju.com/uploads/20190114/20/1547469081-ytacOZdCWK.jpg" id='img2' draggable="true"
            width="240">

        <img src="http://image.biaobaiju.com/uploads/20190114/20/1547469081-ytacOZdCWK.jpg" id='img3' draggable="true"
            width="240">

    </div>

    <div id='d2'>

        <P>拖动目的地点击返回</P>

    </div>

</body>



</html>

<script>

    var imgLIst = document.getElementsByTagName('img')

    for (var i = 0; i < 3; i++) {

        //ondragstart当你拖拽的时候

        imgLIst[i].ondragstart = function (event) {

            //当拖拽时获取ID setData(类型,值)

            event.dataTransfer.setData('text', event.target.id);

        }

    }

    //移动到位置

    var div = document.getElementById('d2');

    var idList = []

    //悬停时有效果

    div.ondragover = function (event) {

        event.preventDefault();//禁止dragover事件的默认行为

    }

    div.ondrop = function (event) {

        var id = event.dataTransfer.getData('text');

        console.log(id);

        var img = document.getElementById(id)//getData获取保存de数据和类型

        var that = this

        that.appendChild(img)

        idList.push(id)

        //点击图片时删除图片

        img.onclick = function (event) {

            document.getElementById('d1').appendChild(document.getElementById(event.target.id))

            idList.splice(event.target.id, 1)

            console.log('变化', idList)

        }

        console.log(idList)

    }



</script>