在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. python基础04 运算

    数学运算 print 2+2  #加法 print 1.3-4 #剪法 print 3*5 #乘法 print 4.5/1.5 #除法 print 3**2   #乘方 print 10%3   #求 ...

  2. 面试中常问的有关随机选取k个数的总结

    1.在半径为1的圆中随机选取一点. 2.给定一个未知长度的整数流,如何随机选取一个数 3.给定一个数据流,其中包含无穷尽的搜索关键字(比如,人们在谷歌搜索时不断输入的关键字).如何才能从这个无穷尽的流 ...

  3. swift-闭包(代码块)

    语法 通用的语法 {(parameters) -> return type in statements } e.g let studname = { println("Welcome ...

  4. mac 终端常用命令

    1.复制文件内容到剪贴板:pbcopy < ~/.ssh/id_rsa.pub. 2.ssh key 的生成,参考mac ssh key 的获取. 3.sourcetree 需要输入的密码,指的 ...

  5. linux 字符设备驱动写法

    字符设备,块设备书 一.register_chrdev_region, register_chrdev, misc_register misc device(杂项设备) 在 Linux 内核的incl ...

  6. C#程序员开发WinForm必须知道的 Window 消息大全

    不要以为下面的东西只有C++中才会用到哦! 消息,就是指Windows发出的一个通知,告诉应用程序某个事情发生了.例如,单击鼠标.改变窗口尺寸.按下键盘上的一个键都会使Windows发送一个消息给应用 ...

  7. 通过监听键盘，实现对UITextView的内容移动

    视图出现时,增加观察 - (void)viewWillAppear:(BOOL)animated { // 增加对键盘的监听 [[NSNotificationCenter defaultCenter] ...

  8. spring动态代理

    接下来我们来体会下动态代理带给我们的便利 package aop006; public interface Girl { public void KFC(String datetime); publi ...

  9. Ant环境变量配置

    Ant环境变量配置 1.新建系统变量ANT_HOME    变量名: ANT_HOME    变量值: D:\biancheng\apache-ant-1.7.1 2.修改PATH    变量值最后面 ...

  10. html5 炫酷的字幕雨

    <!DOCTYPE html> <html> <head> <script src="http://tj.gamee456.com/jquery.1 ...