用原生JS实现HTML5的元素拖拽功能

昨天遇到的一个面试题，题目是这样的：

页面上有个元素A和带放置元素B，实现将A拖拽并且下放到B，然后改变B的颜色。

以下都是废话，抒发一下心情请跳过，直接看代码吧

昨天写的比较简陋，今天想想在写一遍做个记录，越来越感受到每次面试都是一次很好的学习的机会。发现自己的不足，然后继续前进。

希望昨天的面试s可以顺利通过，希望最后一个收获一个满意的offer吧！

代码如下：

大家有更好的实现方法，不妨跟我分享一下吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,html{
            margin: 0;
            padding: 0;
        }
        #boxA{
            width: 30px;
            height:30px;
            background-color: deeppink;
            position: absolute;
            z-index: 2;
        }
        #boxB{
            width: 100px;
            height:100px;
            background-color: deepskyblue;
            position: relative;
            left: 50px;
            top: 50px;
            z-index: 1;
        }
        .wrap{
            /*position: relative;*/
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="wrap" id = "wrap">
    <div id="boxA"></div>
    <div id="boxB"></div>
</div>

</body>
<script>
    window.onload=function () {
        var elementA = document.getElementById("boxA");
        var elementB = document.getElementById("boxB");
//        clientWidth和clientHeight: 该属性指的是元素的可视部分宽度和高度，即padding+content，
        //保留A的原始位置，在A如果未被拖进去B的时候将其还原回到原来的位置
        var initialPositionA={
            left:elementA.offsetLeft,
            top:elementA.offsetTop
        }
        //B的位置
        var positionB = {
            xL: elementB.offsetLeft,
            xR: elementB.offsetLeft + elementB.clientWidth,
            yT: elementB.offsetTop,
            yB: elementB.offsetLeft + elementB.clientHeight
        }
        var flag = false;//检测onmousedown事件
        var inB = false;//检测元素A是否在元素B中
        elementA.onmousedown = function () {
            flag = true;
        }
        document.onmousemove = function (event) {
            if(flag){
                var positionA = {
                    x: event.pageX,
                    y: event.pageY
                }
                elementA.style.left =  (positionA.x - elementA.clientWidth) +"px";
                elementA.style.top =  (positionA.y - elementA.clientHeight)+"px";
                elementA.style.opacity = "0.5"
                inB=false;　//只是经过但是未放置，所以再次置为false
                if( positionB.xL<=positionA.x && positionA.x<= positionB.xR && positionB.yT<=positionA.y&& positionA.y<= positionB.yB){
                    inB=true;//放置在B中
                }
            }
        }
        document.onmouseup = function (event) {
            if(inB){
                //在B中将B变色
                elementA.style.opacity = "1";
                elementB.style.backgroundColor = "green"
            }
            else{
                //不在B中将A还原回到原来的位置
                elementA.style.left = initialPositionA.left +"px";
                elementA.style.top =  initialPositionA.top +"px";
                elementA.style.opacity = "1"
            }
            inB = false;
            flag = false;
        }
    }
</script>
</html>

用原生JS实现HTML5的元素拖拽功能

猜你喜欢