在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. 使用echarts开发电子屏数据展示页面

    背景 之前的项目因为要顾及体量问题,选用了highchart,没用上echarts:这次因为是本地部署电子屏幕的展示页,不需要考虑体量大小,直接用上了echarts:用起来觉得非常不错,特别是地图上非 ...

  2. HDU5977 Garden of Eden（树的点分治）

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5977 Description When God made the first man, he ...

  3. 关于handler 和 looper 的问题

    重新去学习回顾looper和handler ,还是需要重新认识这个经常使用的机制. 我首先是看任玉刚老师的书<android的开发艺术探索>的第十章. 里面一句话开始说出了我们大概的理解— ...

  4. php备份数据库

    php备份数据库原理和方法 原理 查找所有表 查找所有字段,列出所有字段名 字段类型等信息 查找所有数据 读取后注意特殊符号转换addslashes() 生成sql 把数据库格式化生成对应sql 相关 ...

  5. js实现简单的图片轮播

    js代码如下 <script type="text/javascript"> var n=1; var map=new Array(); map[0]=new Imag ...

  6. JS生成随机字符串

    function randomString(len) { len = len || 32; var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxy ...

  7. IDEA+Tomcat+JRebel热部署1

    所需资源下载: jrebel_6.4.2a  概述 JRebel是一个J2EE热部署的工具.使用它可以减少浪费8-18%的开发时间在项目的构建和部署上.之前只是听说过,一直没有实践,今天实际使用了一把 ...

  8. JavaScript固定宽高

    固定高宽:  <script type="text/javascript">         if (/Android (\d+\.\d+)/.test(navigat ...

  9. 怎么可以让div自适应屏幕的高度？（已解决）

    主要解决问题的方法是用JS脚本. 先看布局, 一个div是首部,另一个div是主体,主体包含左侧菜单和右侧内容. 我想把主体div的高度自适应屏幕剩余区域,怎么做? 首先,获取可见区域的高度,docu ...

  10. 远程桌面连接 win7 主机提示“您的凭据不工作”的解决办法

    搞了大半天,找了百度N中方式操作,至少翻看10种以上解决方式,结果还是不得行 索性使用了360搜索,搜了几次就搞定了. 解决办法: “ 最重要一点, 主机上要允许用户以非guest身份登录:主机上运行 ...