HTML5拖放

拖放（Drag和drop）是H5标准的组成部分

此处需具备js基础知识及其H5拖拽部分相关方法

 在拖动目标上触发事件 (源元素):

        ondragstart - 用户开始拖动元素时触发

        ondrag - 元素正在拖动时触发

        ondragend - 用户完成元素拖动后触发

 释放目标时触发的事件:

        ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

        ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

        ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

        ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

下面来看几个例子

第一：本地拖放

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<style type="text/css">

    #boxContainer{

        background-color: #BC8F8F;

        width: 600px;

        height: 400px;

    }

</style>

<body>

<div id="boxContainer"></div>

<div id="msg"></div>

<script>

    var imgContainer,msgDiv;

window.onload=function(){

    imgContainer=document.getElementById("boxContainer");

    msgDiv=document.getElementById("msg");

    imgContainer.ondragover=function(e){

        e.preventDefault();//阻止事件event默认行为

    };

    imgContainer.ondrop=function(e){//通过showObj函数显示信息知道本地图片拖拽与file信息有关

        e.preventDefault();

        var f=e.dataTransfer.files[0];//获取信息

        var fileReader=new FileReader();//读取信息

        fileReader.onload=function(e){//通过fileReader监听事件

            showObj(e.target);

            imgContainer.innerHTML="<img src=\""+fileReader.result+"\">"

        };

        fileReader.readAsDataURL(f);//读取地址

    }

};

function showObj(obj){//这个函数只是为了表达在拖放成功后取显示去盛放拖拽造成的数据信息

    var s="";//声明局部变量

    for(var k in obj){//用forin循环遍历数据信息

        s+=k+":"+obj[k]+"<br/>"

    }

    msgDiv.innerHTML=s;//显示信息在HTML

}

</script>

</body>

</html>

第二：H5拖放

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<style type="text/css">

    .box{

        width:400px;

        height:300px;

    }

    #box1{

        float: left;

        background-color: orange;

    }

    #box2{

        float: left;

        background-color: rosybrown;

    }

</style>

<body>

<div id="box1" class="box"></div>

<div id="box2" class="box"></div>

<img id="img1" src="data:images/demo.jpg" width="200" height="200"/>

<div id="msg"></div>

<script>

       var box1Div,box2Div,msgDiv,img1;//声明全局变量

window.onload=function(){

    box1Div=document.getElementById("box1");//获取放置拖拽元素的div

    box2Div=document.getElementById("box2");

    msgDiv=document.getElementById("msg");//获取显示拖拽信息的元素的div

    img1=document.getElementById("img1");

    box1Div.ondragenter=function(e){//给其添加ondragenter即当被鼠标拖动的对象进入其容器范围内时触发此事件，即给拖拽加监听事件        showObj(e);//e为event事件为事件参数   }

    box1Div.ondragover=function(e){

        e.preventDefault();//阻止事件event默认行为

    };

    box2Div.ondragover=function(e){//ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

        e.preventDefault();//阻止事件event默认行为，调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

    };

    img1.ondragstart=function(e){//ondragstart - 用户开始拖动元素时触发

        e.dataTransfer.setData("imgId","img1");//用setData方法获取数据

    };

    box1Div.ondrop=dropImghand;

    box2Div.ondrop=dropImghand;//ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

};

function dropImghand(e){//box1Div.ondrop=后拿出来设置函数名，即封装成方法，再在上面引用

    showObj(e.dataTransfer);

    e.preventDefault();//阻止事件event默认行为

    //创建节点，放置数据

    var img=document.getElementById(e.dataTransfer.getData("imgId"));

    e.target.appendChild(img);//添加到节点当中

}

function showObj(obj){//这个函数只是为了表达在拖放成功后取显示去盛放拖拽造成的数据信息

    var s="";//声明局部变量

    for(var k in obj){//用forin循环遍历数据信息

        s+=k+":"+obj[k]+"<br/>"

    }

    msgDiv.innerHTML=s;//显示信息在HTML

}

</script>

</body>

</html>

HTML5之拖拽的更多相关文章

  1. HTML5之拖拽(兼容IE和非IE)

    前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...

  2. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  3. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  4. [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件

    前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...

  5. HTML5图片拖拽预览原理及实现

    一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...

  6. HTML5文件拖拽

    HTML5新增的File API, 可以获取名称.文件大小.类型等信息,需先对DOM中的Element进行拖拽事件绑定 相关API 首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状 var dr ...

  7. HTML5 实现拖拽

    如图 可以从第一个方框拖拽花色到第二个方框中. 也可以再拖动回来. 具体代码实现 index.html <!DOCTYPE HTML> <html> <head> ...

  8. html5实现拖拽文件上传

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  9. HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  10. HTML5原生拖拽/拖放(drag & drop)详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

随机推荐

  1. Spring IOC (DI-依赖注入)

    看到一篇文章,讲Spring的依赖注入讲的很好理解,也很容易理解,非常详细.原文地址: https://blog.csdn.net/javazejian/article/details/5456130 ...

  2. 网络虚拟化技术 -- LXC TUN/TAP MACVLAN MACVTAP

    Linux的网络虚拟化是LXC项目中的一个子项目,LXC包括文件系统虚拟化,进程空间虚拟化,用户虚拟化,网络虚拟化,等等 [ LXC内核命名空间 ],这里使用LXC的网络虚拟化来模拟多个网络环境. 创 ...

  3. spring cloud zuul 配置

    参考:http://www.ityouknow.com/springcloud/2017/06/01/gateway-service-zuul.html spring boot版本:2.0.3.REL ...

  4. SSH 无法启动的原因分析及解决方法

    简介 Secure Shell(缩写为 SSH),由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为一项创建在应用层和传输层基础上的安全协议,为计算机上的 S ...

  5. Python 爬虫 ajax爬取马云爸爸微博内容

    ajax爬取情况 有时候我们在用 Requests 抓取页面的时候,得到的结果可能和在浏览器中看到的是不一样的,在浏览器中可以看到正常显示的页面数据,但是使用 Requests 得到的结果并没有,这其 ...

  6. 通过Windows Server 2008 R2建立iSCSI存储

    名词解释:iSCSI技术是一种由IBM公司研究开发的,是一个供硬件设备使用的可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行 SCSI协议,使其能够在诸如高速千兆以太网上 ...

  7. VS无法加载Web项目

    在VS中修改Web项目的服务器设置时无法加载改Web项目,提示如下图 原因:因为项目中的EbcBuy.Bll.Users.WebApi.csproj.user文件并没有加入到版本控制文件,所以讲项目还 ...

  8. Centos7中yum安装MySQL

    安装mysql [root@localhost ~]# yum update [root@localhost ~]# cat /etc/redhat-release CentOS Linux rele ...

  9. 分享个Cognos8.4安装介质的百度云网盘链接

    https://pan.baidu.com/share/link?shareid=3750687613&uk=3441846946#list/path=%2F

  10. BZOJ1880:[SDOI2009]Elaxia的路线(最短路,拓扑排序)

    Description 最近,Elaxia和w**的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间.Elaxia和w**每天都要奔波于宿舍和实验室之间, ...