在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. 网站banner写法

    css .banner{ width: %; height: 375px; background: url(X.jpg) no-repeat center;} html <div class=& ...

  2. Spring 使用 SLF4J代替 Commons Logging 写日志 异常

    项目的日志更换成slf4j和logback后,发现项目无法启动.错误提示 Caused by: java.lang.NoClassDefFoundError: Lorg/apache/commons/ ...

  3. 图的基本遍历算法的实现（BFS & DFS）复习

    #include <stdio.h> #define INF 32767 typedef struct MGraph{ ]; ][]; int ver_num, edge_num; }MG ...

  4. 基于node.js的压缩合并安装

    1.构建工具(grunt,gulp) 下载地址:http://gruntjs.cn/http://gruntjs.com/ (1)安装nodejs(http://www.nodejs.org/) 验证 ...

  5. Web前端开发推荐阅读书籍

    前言 前端工程师在中国兴起也就5年左右,以前公司里没有专门前端工程师的这个职位,很多前端方面的任务都是由全栈工程师来完成,有的基础一点的后台或者设计的帮助分担一些.但是随着互联网的快速发展,特别是所谓 ...

  6. mark

    *求数根公式:a的数根b = (a-1) % 9 + 1; *约瑟环问题:f1 = 0; 第i个(i>1),f = (f+m) %i;

  7. Mac下搭建hexo

    Mac下搭建hexo 并部署到gitcafe 1.安装brewhome ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homeb ...

  8. python学习笔记--基础概要

    1.python的int类型没有大小限制(或者说只受机器内存限制),str类型用单引号或者双引号都行,只要对称就可以了.(注意固定性) 2.使用[]表示存取字符串等序列的某一项(索引从0开始) 3.类 ...

  9. DNS域名服务器

    DNS是用来解析域名的,IP就相当于地址一样,不知道IP就没法访问指定网络.要上PC6下载站,输入www.pc6.com, 得先问问DNS大哥www.pc6.com在哪,然后Dns告诉你后,就上去了w ...

  10. FIR on Hadoop using hadoop-streaming

    1.Prepare Hadoop Streaming Hadoop streaming allows you to create and run Map/Reduce jobs with any ex ...