<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .div1{

            width: 200px;

            height: 200px;

            border: 1px solid red;

            position: relative;

            margin-left:20px;

            float: left;

        }

        .div2{

            width: 200px;

            height: 200px;

            border: 1px solid blue;

            position: relative;

            margin-left:20px;

            float: left;

        }

        .div3{

            width: 200px;

            height: 200px;

            border: 1px solid green;

            position: relative;

            margin-left:20px;

            float: left;

        }

        p{

            background-color: orange;

            margin-top: 5px;

        }

    </style>

</head>

<body>

<div class="div1" id="div1">

    <!--在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽-->

    <p id="pe" draggable="true">试着把我拖过去</p>

    <p id="pe1" draggable="true">试着也把我拖过去</p>

</div>

<div class="div2" id="div2"></div>

<div class="div3" id="div3"></div>

<script>

    /*学习拖拽，主要就是学习拖拽事件*/

    var obj=null;//当前被拖拽的地元素

    /*应用于被拖拽元素的事件

     *ondrag         应用于拖拽元素，整个拖拽过程都会调用--持续

     ondragstart    应用于拖拽元素，当拖拽开始时调用

     ondragleave    应用于拖拽元素，当鼠标离开拖拽元素时调用

     ondragend    应用于拖拽元素，当拖拽结束时调用*/

    document.ondragstart=function(e){

        /*通过事件捕获来获取当前被拖拽的子元素*/

        e.target.style.opacity=0.5;

        e.target.parentNode.style.borderWidth="5px";

        obj= e.target;

        /*通过dataTransfer来实现数据的存储与获取

        * setData(format,data):

        * format:数据的类型：text/html   text/uri-list

        * Data:数据:一般来说是字符串值*/

        e.dataTransfer.setData("text/html", e.target.id);

    }

    document.ondragend=function(e){

        e.target.style.opacity=1;

        e.target.parentNode.style.borderWidth="1px";

    }

    document.ondragleave=function(e){

    }

    document.ondrag=function(e){

    }

    /*应用于目标元素的事件

    *ondragenter    应用于目标元素，当拖拽元素进入时调用

     ondragover    应用于目标元素，当停留在目标元素上时调用

     ondrop        应用于目标元素，当在目标元素上松开鼠标时调用

     ondragleave    应用于目标元素，当鼠标离开目标元素时调用*/

    document.ondragenter=function(e){

        console.log(e.target);

    }

    document.ondragover=function(e){

        /*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/

        e.preventDefault();

    }

    /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/

    document.ondrop=function(e){

        /*添加元素*/

        //e.target.appendChild(obj);

        /*通过e.dataTransfer.setData存储的数据，只能在drop事件中获取*/

        var id=e.dataTransfer.getData("text/html");

        /*console.log("id="+id);*/

        e.target.appendChild(document.getElementById(id));

    }

    document.ondragleave=function(e){

    }

</script>

</body>

</html>

H5 拖拽元素的更多相关文章

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

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

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

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

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

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

  4. H5 拖拽操作

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

  5. JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...

  6. juqery 拖拽元素

    转自  http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...

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

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

  8. 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题

    被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...

  9. vue-drag-resize 可拖拽可缩放的标签，如何管理多个拖拽元素之间的zIndex？操作上需要保持当前激活的组件是最上层，但是在总体上，又要确保其图层管理的顺序。

    麻烦总是不断出现,还好办法总比困难多, 1.公司开发一款可视化编辑html网页的多媒体编辑平台,牵扯到标签元素的拖拽,缩放,我找了找方法发现原生技术实现起来代码太多,麻烦,还好找到了一个vue组件,可 ...

随机推荐

  1. $.inArray()方法

    $.inArray() 函数用于在数组中查找指定值,并返回它的索引值(如果没有找到,则返回-1) 提示:源数组不会受到影响,过滤结果只反映在返回的结果数组中. 语法 $.inArray( value, ...

  2. R语言与非参数统计（核密度估计）

    R语言与非参数统计(核密度估计) 核密度估计是在概率论中用来估计未知的密度函数,属于非参数检验方法之一,由Rosenblatt (1955)和Emanuel Parzen(1962)提出,又名Parz ...

  3. Hibernate的DetachedCriteria使用（含Criteria）转载

    https://www.cnblogs.com/deng-cc/p/6428599.html 1.背景了解:Hibernate的三种查询方式 Hibernate总的来说共有三种查询方式:HQL.QBC ...

  4. Linux进程管理（四、 进程终结）

    进程调用exit()会终结当前进程,可以显式调用,也可以隐式: c语言main函数结束时编译器会自动加入exit调用 exit是系统调用,对应内核里的sys_exit() -> do_exit( ...

  5. 【JZOJ1611】Dining

    题目描述 农夫JOHN为牛们做了很好的食品,但是牛吃饭很挑食.每一头牛只喜欢吃一些食品和饮料而别的一概不吃.虽然他不一定能把所有牛喂饱,他还是想让尽可能多的牛吃到他们喜欢的食品和饮料. 农夫JOHN做 ...

  6. n!素因子p的幂 swjtuOJ 2090【数论】

    原文地址:http://blog.csdn.net/u012717411/article/details/47334969(感谢作者) 素因子分解写的非常好!数论一道好题:给以两个大整数n,s(n&l ...

  7. docker+jenkins的实现方式(ps.使用dockerfile的方式)！

    继http://www.cnblogs.com/guilty/p/4747993.html之后. 前两天朋友问的,docker+jenkins整合. 我也没搞过,但是正好最近有空,我也很有兴趣,就搞一 ...

  8. windows下多版本python安装与pip安装和pip使用 吐血总结

    https://blog.csdn.net/silence2015/article/details/56483892/ 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附 ...

  9. .net 数据表格显示控件

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/chenjinge7/article/details/30470609 1. GridView 控件 ...

  10. iis7服务器隐藏index.php

    1.安装url重写模块 32位:http://download.microsoft.com/download/4/9/C/49CD28DB-4AA6-4A51-9437-AA001221F606/re ...