HTML5 drag的使用案例 --- 类似于图片墙

最新推荐文章于 2021-11-27 11:02:54 发布

kuck

最新推荐文章于 2021-11-27 11:02:54 发布

阅读量979

点赞数 1

分类专栏： drag 图片 html5

本文链接：https://blog.csdn.net/KuckBoy/article/details/47819067

版权

drag 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

图片

1 篇文章 0 订阅

订阅专栏

html5

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>drag案例的演示</title>
    <script>
        function allowDrop(ev){
            //不执行默认处理（拒绝被拖放）
            ev.preventDefault();
        }
        function drag(ev){
            //使用setData（数据类型，携带的数据）
            //方法将要拖放的数据存入datatransfer对象
        //    var dragid = document.getElementById(id).value;
            ev.dataTransfer.setData("Text",ev.target.id);
        }

        function drop(ev){
            //不执行默认处理（拒绝被拖放）
            ev.preventDefault();
            //使用getData()获取到数据，然后赋值给data
            var data = ev.dataTransfer.getData("Text");

            //判断target的id是否和下面图片中的id相等的 相等说明是要把两张图片换一下
            var flag = 0;
            for(var i = 0; i < document.getElementsByTagName("img").length;i++){
                if(document.getElementsByTagName("img")[i].id == ev.target.id){
                    flag =1;
                }
            }

            if(flag == 1){
                var temp = document.getElementById(data).src;
                document.getElementById(data).src = document.getElementById(ev.target.id).src;
                document.getElementById(ev.target.id).src = temp;

            }else{
            //使用appendChild方法把拖动的节点放到元素节点中成为他的子节点
                ev.target.appendChild(document.getElementById(data));
            }


        }
    </script>
    <style>
        img{
            background: #e54d26;
            width: 300px;
            height: 200px;
            margin: 0;
            padding: 0;
        }
        #cun{
            margin:0;
            padding:0;
            width: 602px;
            height: 403px;
            border: 2px solid #D2D2D2;
            box-shadow: 1px 4px 8px #646464;

        }
    </style>

</head>
<section>
    <p>你可以把喜欢的图片拖放到下面的框中！</p>
    <p>也可以随意的把拖进来的图片换位置，按自己的喜欢排版</p>
</section>
<div id="cun" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<img src="banana.jpg" id="tuo1" draggable="true" ondragstart="drag(event)"/>
<img src="dog.jpg" id="tuo2" draggable="true" ondragstart="drag(event)" />
<img src="dog2.jpg" id="tuo3" draggable="true" ondragstart="drag(event)" />
<img src="cat.jpg" id="tuo4" draggable="true" ondragstart="drag(event)"/>
</body>
</html>

案例中使用的图片的话
自己搞几张就可以了。。。

结果的话
如下图
这里写图片描述

这里写图片描述

kuck

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 drag的使用案例 --- 类似于图片墙

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>drag案例的演示</title> <script> function allowDrop(ev){ //不执行默认处理（拒绝被拖放） ev.preventDefault()
复制链接

扫一扫

专栏目录