在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拖拽的更多相关文章

  1. H5拖拽 构造拖拽及缩放 pdf展示

    前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...

  2. H5 拖拽读取文件和文件夹

    1)拖拽方面的重点是:ondragover 事件 和 ondrop 事件 ondragover 是必须的,ondragover 事件里禁用掉 html 的默认事件,否则 ondrop 事件将无效(直接 ...

  3. H5拖拽 构造拖拽及缩放 pdf文件转换为html预览

    前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...

  4. js仿QQ拖拽删除

    原生js实现仿QQ拖拽删除交互,无需任何依赖. 项目演示请看这里, gitHub请移步这里. 由于源码很长,所以贴到最下面了. 效果截图如下: 核心思想呢,就是点击圆点的时候全屏覆盖个canvas,在 ...

  5. H5 拖拽操作

    H5 拖拽操作 前言 在原生H5中,可以通过提供的api实现在网页内元素的拖拽操作.相对于传统的写法更加的简单. 而想要实现拖拽,主要需要进行两个方面的工作,第一是给元素设置draggable='tr ...

  6. h5拖拽上传图片

    h5实现拖拽上传图片 本文将为大家介绍如何通过js实现拖拽上传图片. 首先我们要禁用调浏览器默认的拖拽事件: window.onload = function(){ //拖离 document.add ...

  7. H5 拖拽,一个函数搞定,直接指定对象设置可拖拽

    页面上,弹个小窗体,想让它可以拖拽,又不想 加载一堆js,就简单的能让他可以拖动? 嗯,下面有这样一个函数,调用下就好了! 1. 先来说说 H5的 拖拽 在 HTML5 中,拖放是标准的一部分,任何元 ...

  8. H5 拖拽元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果

    探探/Tinder是一个很火的陌生人社交App,趁着国庆假期闲暇时间倒腾了个Nuxt.js项目,项目中有个模块模仿探探滑动切换界面效果.支持左右拖拽滑动like和no like及滑动回弹效果. 一览效 ...

随机推荐

  1. 同一台电脑上多个myeclipse破解的问题

    因为项目版本的问题,电脑上不得装了个myeclipe10版本的,但是破解之后,原来电脑上的myeclipse2014却显 示没有激活,好吧,我又去把myeclipse2014重新激活了一遍,但是到了m ...

  2. js模拟抛出球运动

    js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...

  3. 普林斯顿算法课第五周作业_KdTree

    作业地址:http://coursera.cs.princeton.edu/algs4/assignments/kdtree.html 作业难点: 1.如何构建KdTree,使用什么样的数据结构? 根 ...

  4. 餐厅点餐系统app总结

    总结: 三个冲刺已经结束,虽然没有说十分完美,但该实现的功能还是实现了,只是在市场是相较于专业性的缺乏竞争力,从界面到体验都需进一步优化. 每个人的进度不一样,为了同一个任务需要不断的磨合与合作,但慢 ...

  5. mac linux 删除一个文件下边所有文件和文件夹

    sudo rm -r -f 目录

  6. MacOS下Python的多版本管理（pyenv）

    与windows下设置绝对路径不同,pyenv使用了一种更优雅的方式来管理Python的版本.pyenv通过在$PATH的最前面插入一个垫片路径(shims),例如:~/.pyenv/shims:/u ...

  7. Qt下的udp编程

    项目需要一个基于udp的客户端, 看着Qt是有个QUdpSocket的类的, 但自带的例子和类的说明都没咋说明白: 怎么用一个QUdpSocket既当发送端, 又当接收端? 谷歌一顿后, 发现很多老内 ...

  8. db2 日期时间格式

    db2日期和时间常用汇总 1.db2可以通过SYSIBM.SYSDUMMY1.SYSIBM.DUAL获取寄存器中的值,也可以通过VALUES关键字获取寄存器中的值. SELECT 'HELLO DB2 ...

  9. JAVA面试逻辑题1

    一.计算推理 烧香问题: 有两根不均匀分布的香,每一根烧完的时间都是一小时.用什么办法确定一段15分钟的时间? 解题步骤: 1.点燃第一根的两头,同时点燃第二根的一头: 2.等到第一根燃尽以后,再点燃 ...

  10. 通读SDWebImage②--视图分类

    本文目录 UIView+WebCacheOperation UIImageView+WebCache.UIImageView+HighlightedWebCache.MKAnnotationView+ ...