HTML5 拖放事件案例

最新推荐文章于 2024-04-20 11:06:33 发布

心郎

最新推荐文章于 2024-04-20 11:06:33 发布

阅读量1.6k

点赞数 1

分类专栏：前段_html

本文链接：https://blog.csdn.net/u011301203/article/details/53122692

版权

前段_html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .one{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }

        .one>div,.two>div{
            width: 98px;
            height: 98px;
            border: 1px solid #000;
            border-radius: 50%;
            background-color: blue;
            float: left;
            text-align: center;
            line-height: 98px;
        }

        .two{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            position: absolute;
            left:600px;
            top:200px;
        }
    </style>
</head>
<body>
    <div class="one">
        <div draggable="true">1</div>
        <div draggable="true">2</div>
        <div draggable="true">3</div>
        <div draggable="true">4</div>
        <div draggable="true">5</div>
        <div draggable="true">6</div>
        <div draggable="true">7</div>
        <div draggable="true">8</div>
    </div>
    <div class="two"></div>

    <script>
    	
//   在拖动目标上触发事件 (源元素):
//      ondragstart - 用户开始拖动元素时触发
//      ondrag - 元素正在拖动时触发
//      ondragend - 用户完成元素拖动后触发
//
//   释放目标时触发的事件:
//      ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
//      ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
//      ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
//      ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

    
        var boxs=document.querySelectorAll('.one div');
        var two=document.querySelector('.two');
        var temp=null;
        
        for(var i=0;i<boxs.length;i++){ // 给8个小盒子分别绑定拖拽事件
            boxs[i].οndragstart=function(){ // 拖拽开始
                temp=this;
                console.log(temp);
            }
	        boxs[i].οndragleave=function(){ // 拖拽中
	            console.log('拖拽离开了....');
	        }
            boxs[i].οndragend=function(){ // 当拖拽结束 ，清空temp
                this.style.cssText = "background:red";
                temp=null;
                console.log(temp);
            }
        }

        two.οndragοver=function(e){ // 目标元素的拖拽事件
            e.preventDefault();// 阻止拖拽的默认行为
        }

        two.οndrοp=function(){ // 当在目标元素上松开鼠标是触发
            this.appendChild(temp); // 将拖拽的元素追加到 two里面来
        }
        
    </script>
</body>
</html>

心郎

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 拖放事件案例

.one{ width: 400px; height: 400px; border: 1px solid #000; } .one>div,.two>div{ width: 98px; height: 98px; bord
复制链接

扫一扫