在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. DirectX9 Sample_Empty Project

    作为第一个程序,EmpytProject仅仅示范了如何绑定DXUTstate结构中的回调函数. 回调函数 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当 ...

  2. Leetcode Power of Two

    Given an integer, write a function to determine if it is a power of two. 题目意思: 给定一个整数,判断是否是2的幂 解题思路: ...

  3. [知识点]字符串Hash

    1.前言 字符串的几大主要算法都多少提及过,现在来讲讲一个称不上什么算法, 但是非常常用的东西——字符串Hash. 2.Hash的概念 Hash更详细的概念不多说了,它的作用在于能够对复杂的状态进行简 ...

  4. bootstrap之google fonts

    bootstrap之google fonts 在学习一个bootstrap时,看到了一行引用代码:@import url(http://fonts.googleapis.com/css?family= ...

  5. 出现了内部错误-网站中X509Certificate2加载证书时出错

    今天给网站配置了加密证书文件,用类X509Certificate2加载证书文件时,一直报出现了内部错误,但是Demo中用控制台程序加载证书没任何问题 读取证书文件的语句: X509Certificat ...

  6. bootstrap学习笔记【转】

    bootstrap是由Twitter公司研发的一个基于HTML,CSS,JavaScript的开源框架,最重要的部分是它的响应式布局.(国内文档翻译官网:http://www.bootcss.com/ ...

  7. 【转】通过Hibernate将数据 存入oracle数据库例子

    一. Hibernate介绍 Hibernate是基于对象/关系映射(ORM,Object/Relational Mapping)的一个解决方案.ORM方案的思想是将对象模型表示的对象映射到关系型数据 ...

  8. Struts 2的OGNL的根对象

    Struts2中的OGNL表达式语言是对Xwork的OGNL的封装.我们要理解一下几点: 1． Struts2中将ActionContext作为OGNL的上下文环境(ActionContext内部含有 ...

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

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

  10. 利用sql注入

    INSERT查询中实现注入攻击 1. 思路就是在含有insert语句的页面插入目标值信息.经常包含的是一个子查询. 2. 注意在insert过程中,左边的注入点和右边的注入点会有不同 3. 在mysq ...