HTML5拖放
拖放本地数据
 
1.HTML拖放
拖放（Drag 和 Drop）是HTML5标准的组成部分
2.拖放开始：
ondragStart:调用了一个函数，drag(event),它规定了被拖动的数据
3.设置拖动数据：
setDate():设置被拖动数据的数据类型和值
4.放入位置：
ondragover:事件规定在何处放置被拖动的数据
5.放置：
ondrop：当放置被拖数据时，或发生drop事件
 
html5实现本页面元素拖放
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>拖放本页面数据</title>

        <style>

            .box {

                width: 400px;

                height: 400px;

            }

            #box2 {

                float: left;

                background-color:black;

            }

            #box1 {

                float: left;

                background-color: #cccccc;

            }

        </style>

    </head>

    <body>

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

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

        <img id="img1" src="img/xk.png" width="100px" height="100px" />

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

        <script>

            var box1Div,box2Div, msgDiv, imgDiv1;

            window.onload = function() {

                box1Div = document.getElementById("box1");

                box2Div = document.getElementById("box2");

                msgDiv = document.getElementById("msg");

                imgDiv1 = document.getElementById("img1");

                /*box1Div.ondragenter = function(e){//当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上

                    showObj(e);

                }*/

                box1Div.ondragover = function(e) { //拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上

                    e.preventDefault();

                }

                box2Div.ondragover = function(e) { //拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上

                    e.preventDefault();

                }

                imgDiv1.ondragstart = function(e) { //当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上

                    e.dataTransfer.setData("imgId", "img1");

                }

                box1Div.ondrop = dropImghandler; //被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上

                box2Div.ondrop = dropImghandler;

            }

            function dropImghandler(e) {

                showObj(e.dataTransfer);

                e.preventDefault();

                //创建节点

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

                e.target.appendChild(img);

            }

            function showObj(obj) {

                var s = "";

                for(var k in obj) {

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

                }

                msgDiv.innerHTML = s;

            }

        </script>

    </body>

</html>

页面元素拖放效果：

html5实现本地文件拖放

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>拖放本地数据</title>

        <style>

            #imgContainer{

                background-color: #CCCCCC;

                width: 500px;

                height: 500px;

            }

        </style>

    </head>

    <body>

        <div id="imgContainer"></div>

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

        <script>

            var imgContainer;

            var msgDiv;

            window.onload = function(){

                imgContainer = document.getElementById("imgContainer");

                msgDiv = document.getElementById("msg");

                imgContainer.ondragover = function(e){

                    e.preventDefault();

                }

                imgContainer.ondrop = function(e){

                    e.preventDefault();

                    var fileObj = e.dataTransfer.files[0];

                    var fileReader = new FileReader();

                    fileReader.onload = function(e){

                        showObj(e.target);

                        imgContainer.innerHTML = "<img src='"+e.target.result+"' width='100px' height='100px' />"

                    }

                    fileReader.readAsDataURL(fileObj);

                }

            }

            function showObj(obj) {

                var s = "";

                for(var k in obj) {

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

                }

                msgDiv.innerHTML = s;

            }

        </script>

    </body>

</html>

本地文件拖放效果：

html5实现本页面元素拖放和本地文件拖放的更多相关文章

  1. HTML5 增强的页面元素

    一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = documen ...

  2. 【Egret】实现web页面操作PC端本地文件操作

    Egret 实现web页面操作PC端本地文件操作: http://edn.egret.com/cn/book/page/pid/181 //------------------------------ ...

  3. [html5] 学习笔记-html5增强的页面元素

    在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...

  4. html5增强的页面元素

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. html5 新增的页面 元素

    figure 和 figcaption元素 test.html <!DOCTYPE html> <html lang="en"> <head> ...

  6. F12修改html进行本地js操作页面元素

    F12修改html进行本地js操作页面元素

  7. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  8. 页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理

    鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...

  9. HTML5之新增的元素

    今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...

随机推荐

  1. CentOS7 安装mysql-5.7.10(glibc版)

    groupadd mysql useradd -r -g mysql mysql 修改mysql目录及子文件属主和属组 chown -R mysql:mysql mysql shell> cd ...

  2. Log表新的RowKey设计，预Split

    1 目前Rawlog表的问题 region数量庞大,空region 率大 共有12791个region 11409空region, 比例为89.19% 剩余的region大小也是极度不均衡,最大的re ...

  3. React Native入门-刘望舒

    React Native入门(一)环境搭建与Hello World React Native入门(二)Atom+Nuclide安装.配置与调试 React Native入门(三)组件的Props(属性 ...

  4. 禁止复制操作 --《C++必知必会》条款32

    class NoCopy{ private: //声明为私有的,则外部不可访问,即:不可复制 NoCopy(const NoCopy & );//复制构造函数 NoCopy & ope ...

  5. SpringData_JpaSpecificationExecutor接口

    不属于Repository体系,实现一组 JPA Criteria 查询相关的方法 Specification:封装 JPA Criteria 查询条件.通常使用匿名内部类的方式来创建该接口的对象 / ...

  6. cas php

    CAS的php客户端实践—单点登录整合php程序 兄弟近日尝试将一个php程序以单点登录方式和原有的系统整合在一起.验证服务器选用的是CAS,其提供有相应的php客户端.整个过程如下:1.搭建CAS服 ...

  7. oracle中 start with .. connect by prior.. 用法简介

    我们经常会将一个比较复杂的目录树存储到一个表中.或者将一些部门存储到一个表中,而这些部门互相有隶属关系.这个时候你就会用到connect by prior start with.oracle 提供了s ...

  8. 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理

    在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...

  9. MySQL "Zero date value prohibited" 问题解析

    问题起因 之前一直使用Oracle数据,对MySQL数据库使用不多,因此搞不懂MySQL的日期“0000-00-00 00:00:00”对程序会产生怎样的影响.费了我一下午的时间 -_-^^. 首先: ...

  10. Python学习札记(二十三) 函数式编程4 sorted

    参考:sorted NOTE 1.sorted,快速排序,时间复杂度O(nlogn)渐进最优. #!/usr/bin/env python3 L = [] for i in range(10): L. ...