HTML5 draggable 拖拽实例

最新推荐文章于 2023-10-14 12:41:19 发布

芬贝

最新推荐文章于 2023-10-14 12:41:19 发布

阅读量720

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45027204/article/details/105587881

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

HTML5 draggable

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTNL5拖拽应用</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #src,
        #target{
            margin: 50px auto;
            width: 800px;
            height: 200px;
            border: 2px solid #424242;
            font-size: 0;
        }
        img{
            width: 200px;
            height: 200px;
        }
        #target{
            border: 2px solid red;
        }
        p{
            margin: 0 auto;
            width: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="src">
        <img id="杨幂A" src="img/1.jpg" draggable="true" alt="">
        <img id="杨幂B" src="img/2.jpg" draggable="true" alt="">
        <img id="杨幂C" src="img/3.jpg" draggable="true" alt="">
        <img id="杨幂D" src="img/4.jpg" draggable="true" alt="">
    </div>
    <div id="target"></div>
    <p id="msg">将选择的图片拖拽到这里</p>
    <script>
        var src = document.getElementById('src');
        var target = document.getElementById('target');
        var msg = document.getElementById('msg');
        var draggedID;
        src.ondragstart = function(e){//拖拽动作开始时触发
            var event = e || window.event;
            var target = event.target || event.srcElement;
            draggedID = target.id;
            msg.innerHTML = "开始拖曳："+draggedID;
        }
        target.ondragenter = function (e){//拖曳时鼠标进入目的元素时触发
            msg.innerHTML="进入目的元素";
            //阻止默认事件执行。
			e.preventDefault();
        } 
        //在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发
        target.ondragover = function (e){//拖曳时鼠标在目的元素内移动时触发
			msg.innerHTML="在目的元素内移动";
            e.preventDefault();
		}
		target.ondragleave = function (e){//被拖拽元素离开目标元素时触发
			msg.innerHTML="离开目标元素";
            e.preventDefault();
		}
		src.ondragend = function (e){//拖曳动作结束时触发
			msg.innerHTML="结束拖曳";
        }
        //cloneNode（）默认为false 克隆的节点复制真节点的样式，标签，属性。至于标签里的元素，事件没有复制，所以我们可以称它浅克隆。
        //cloneNode（true）深克隆 
        //参数设置为true时，表明克隆节点及其属性以及后代；参数设置为false时，表明克隆节点本身。
        target.ondrop = function (e) {//在目的元素内释放拖曳元素时触发
            var newElem = document.getElementById(draggedID).cloneNode(false);
            target.innerHTML = "";
            target.appendChild(newElem);
            e.preventDefault();
        }

    </script>
</body>
</html>