仿h5拖拽

Posted 2020-08-26 小数点就是问题

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿h5拖拽相关的知识，希望对你有一定的参考价值。

在h5中有个拖拽的声明式命令，就如html属性一样，简单强大。

而在网页上拖拽的功能还是需求很大的，所以对这方面应该去仔细了解一下。

所以仿一一下它的实现。只是仿了它的复制一份到目标容器的功能。它还有很多功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<style>
    .dragBox{
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: red;
    }
    .dragBox:after{
        content: "";
        display: block;
        position: absolute;
        width: 40px;
        height: 40px;
        border: 1px solid #eee;
        left: -20px;
        top: 0px;
        border-left:1px solid #ff7600;
        border-top: 1px solid #ff4500;
        transform: rotate(-10deg); 
    }
    .dragBox:before{
        content: "";
        display: block;
        position: absolute;
        width: 40px;
        height: 40px;
        border: 1px solid #eee;
        right: 0px;
        top: -20px;
        border-left:1px solid #ff7600;
        border-top: 1px solid #ff4500;
        transform: rotate(90deg); 
    }
    .target{
        position: absolute;
        top: 200px;
        left: 50px;
        width: 100%;
        height: 100px;
    }
    .opacity{
        opacity: .5;
    }
    .border{
        border: 1px dashed #000;
    }
    .target01{
        position: absolute;
        top: 10px;
        left: 0;
        width: 80%;
        height: 50px;
    }
</style>    

<div class="dragBox target0">
    
</div>

<div class="target">
    <div class="target01"></div>
</div>

    <script>
    /*容器位置*/
    var posData=[{top:pos($(".target")).top,left:pos($(".target")).left,obj:$(".target"),placePosJudge:false},
    {top:pos($(".target01")).top,left:pos($(".target01")).left,obj:$(".target01"),placePosJudge:false}];
    function $(objStr){
        return document.querySelector(objStr);
    }
    /*获取单个容器位置，相对于window的位置*/
    function pos(obj,offset){
        if(!offset){
            offset={top:0,left:0};
        }
        offset.top+=obj.offsetTop;
        offset.left+=obj.offsetLeft;
        if(!obj.offsetParent){
            return offset;
        }
        return pos(obj.offsetParent,offset); 
    }
        (function(undefined){
            var oDargBox=$(".dragBox");
            var oDiv=$(".target");
            document.onmousedown=function(e){
                e=e||window.event;
                if(e.target.className.indexOf("target0")!=-1){
                    var obj=e.target,
                    objClone=obj.cloneNode(true),
                    posX=e.clientX-obj.offsetLeft,
                    posY=e.clientY-obj.offsetTop,
                    index=-1;
                    objClone.classList.add("opacity");
                    document.body.appendChild(objClone);
                    document.onmousemove=function(e){
                        e=e||window.event;
                        var X=e.clientX-posX,Y=e.clientY-posY;
                        objClone.style.left=X+"px";
                        objClone.style.top=Y+"px";
                        /*使用碰撞检测来检测容器范围*/
                        for(var i=0;i<posData.length;i++){
                            if(posData[i].top<Y+100&&
                                Y<posData[i].top+300&&
                                posData[i].left<X+100&&
                                X<posData[i].left+300){
                                for(var j=0;j<posData.length;j++){
                                    posData[j].placePosJudge=false;
                                }
                                posData[i].placePosJudge=true;
                                posData[i].obj.classList.add("border");
                            }else{
                                posData[i].obj.classList.remove("border");
                            }
                        }
                    }
                    document.onmouseup=function(){
                        objClone.classList.remove("opacity");
                        document.onmousemove=document.onmouseup=null;
                        for(var i=0;i<posData.length;i++){
                            posData[i].obj.classList.remove("border");
                            if(posData[i].placePosJudge){
                                posData[i].obj.appendChild(objClone);
                                objClone.style.position="relative";
                                objClone.style.top="0";
                                objClone.style.left="0";
                                return false;
                            }
                        }
                        
                        document.body.removeChild(objClone);
                        return false;
                    }
                    
                }
            }
        })()
    </script>
</body>
</html>

以上是关于仿h5拖拽的主要内容，如果未能解决你的问题，请参考以下文章

android 自定义View:仿QQ拖拽效果

iOS 未读消息角标仿QQ拖拽简单灵活支持xib(源码)

h5-拖拽接口

如何用react实现仿QQ空间拖拽模块

仿360拖拽